A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

A

Account / Account Details The section within Shipcode where users can view and manage their profile information, such as email address, name, password, and profile picture. You can access this by clicking on your user icon and selecting "Account Details".

Accessibility Hint An iOS- and Android-only property that provides detailed information about what will happen when a user using a screenreader interacts with a specific UI element. It's considered best practice to start hints with a verb (e.g., "Navigates to the previous page."). Found in the Universal Access Panel.

Accessibility Label (Aria Label)  A short description you give to a part of your app, like a button or icon. This label tells people using screen readers what that part is, for example, 'back button'. This helps them understand what they are interacting with, even if they can't see it well. You can add these labels in the Universal Access Panel. 

Accessible Toggle A switch you can find in the Universal Access Panel. When you turn it on for a Component that's made up of a few parts (like a button that has both an icon and text), it tells screen readers to treat all those parts as one single thing. This makes it easier for the screen reader to describe it clearly. This applies to native (iOS and Android) only.  

Accordion (Component) A basic Component that consists of a heading container (with a title and optional icon) and a content container that can be shown or hidden based on user interaction (click or tap).

Actions (Flow Nodes) Actions are a type of building block (Node) you use when working with Flows in Flows Mode. They tell your app to do something specific. For example, an Action can:

• Get information from the internet (using tools like GraphQL or Network Request).
• Change how parts of your app look or what information they show (Update Props).
• Move the user to a different screen (Navigate, Back).
• Show or hide pop-up windows (Open Overlay, Close Overlay).
• Save or load information (Set State, Get State).

Active Slot (Data Zone) A property on a Data Zone that controls which slotted child component is currently visible. The Data Zone renders only the child whose Slot label exactly matches the Active Slot value. If Active Slot is empty, all children render regardless of their Slot assignments.

Active Slot is most powerful when bound to a dynamic value using FQL — for example, driven by a Flow response or a state variable — so that the visible state updates automatically based on data loading or application logic. Active Slot is configured in the Settings Panel of the Data Zone itself. See also: Slot (Data Zone).

Android One of the native mobile platforms (along with iOS) for which Shipcode can build applications.

Appearance Panel A panel in the Right Sidebar of Layouts Mode used to style selected Components. It allows you to control aspects like Typography (fonts, sizes, color), Layout (alignment, flexbox behavior), Size (width, height), Spacing (padding, margin), Background color, Borders, and Effects (shadows, corner radius). The options available are context-specific to the selected component.

App Navigation (Project Settings) A section in Project Settings where you create and manage the Top Bar (Action Bar) and Bottom Bar (Tab Bar) for your application's user interface. This is only relevant for native apps.    

Assets Panel A panel in the Left Sidebar of either Layouts or Components Mode where you can upload, organize, and manage images and videos that will be embedded within your application. It supports folders for organization and provides information on file types and sizes.

Attaching Data / Data Binding Attaching Data, also known as Data Binding, is a powerful way to make your app's content change automatically. Instead of typing text or setting a color directly into a Component (which is called a "hardcoded value"), you link that part of the component to a source of information that can change. For example, you could show a product name that comes from an online store, or change a button's color based on user actions. You usually set this up using FQL (Functional Query Language) with the help of the Data Inspector/Picker tool. You'll find this option when you hover over fields in the Right Sidebar.

B

Back (Flow Node) An Action Node in Flows that, when invoked, navigates the user to the previously viewed Route in their browser or application.

Breakpoints Predefined or custom screen widths at which a Layout's responsive behavior changes. Breakpoints are configured and previewed in Focus Mode to test how designs adapt across devices (mobile, tablet, desktop). Base styles set at the Mobile breakpoint propagate upward to larger breakpoints unless overridden with breakpoint-specific values. 

Default breakpoints include Mobile (Portrait), Mobile (Landscape), Tablet, Laptop, and Desktop. Custom breakpoints can be added for specific pixel widths.

Breakpoint Controls Controls that appear in Focus Mode allowing you to preview how a Layout will look across different predefined device sizes or custom widths. You can manage (add, delete, modify) breakpoints from these controls.

Bottom Bar / Tab Bar (App Navigation) A navigation element, typically at the bottom of the screen in mobile apps, containing several buttons with optional icons and labels that allow users to quickly navigate between the main sections of the application. Managed under App Navigation in Project Settings.

C

Canvas (Layouts)  The main visual editing space in Layouts Mode where you design your application screens. You drag and drop Components onto the Canvas, arrange Layouts within a Storyboard, and can pan and zoom to navigate your design.

Canvas (Flows) The visual workspace in Flows Mode where Nodes are arranged and connected with lines to build logic flows. Similar to Layouts Mode Canvas but designed for logic construction rather than UI design. Supports zoom, pan, and drag-drop interactions for building and organizing Flows.

Close Overlay (Flow Node) An Action Node in Flows that dismisses an open Overlay, removing it from the screen. If multiple overlays are present, requires the Overlay ID to specify which overlay to close. Used to programmatically close modals, popovers, or other overlay UI elements opened with the Open Overlay node.

Collaborator A user who has been granted access to work on a project through Project Settings > Members. Collaborator avatars appear in the Header during active editing sessions to show who is currently working in the project. Collaborators are assigned roles (Admin, Publisher, Contributor, or Viewer) that determine their access level.

Command Palette A quick-access tool in Layouts Mode, typically opened with a keyboard shortcut (Cmd+Shift+P on Mac, Ctrl+Shift+P on Windows), that allows you to search for and add Components to the Canvas or Structure Panel without manually dragging them from the Components Panel.

Component The fundamental building blocks used to create user interfaces in Shipcode. Examples include Text, Image, View, Button, Data Zone, etc. Components are added to Layouts from the Component Panel or Command Palette and can be styled using the Appearance Panel. They can be nested within each other to create complex structures.

Components fall into two categories:

• Preset Components come from Libraries (like Launchpad) and are ready-to-use out of the box
• Custom Components are reusable groups you create by saving a combination of components.
• All components ultimately render based on View component behavior with specific styling and functionality layered on top.

Component Context Menu A menu that appears when you right-click on a Component either on the Canvas or in the Structure Panel. It provides actions like Delete, Duplicate, Copy, and Paste for the component.

Component Panel A panel in the Left Sidebar of Layouts Mode that lists all available Components you can use in your project. It's organized into tabs like "All," "Preset" (standard Shipcode components), and "Custom" (user-created templates).

Conditional (Operator Node) An Operator Node in Flows that directs the flow of execution down one of two paths based on whether a provided condition evaluates to true or false.

Connections (Flows) Lines in the Flows Mode editor that link Nodes together, defining the path and order of execution for a Flow.

Context (FQL, Data Zones, and Flow Nodes) When you're using FQL (Functional Query Language) or the Data Picker to select data, Context refers to the available data environment at a specific point in your application. Think of it as the data container FQL can access. For example, a Data Zone component creates a context providing product details to its children. Information from a Flow Node (like results from a GraphQL request) creates a context. Your app has layers of contexts, like onions, letting you access data from very specific spots (a Data Zone) to more general app information (device details or the current screen's URL).

To select a specific context, you use a Scope (like $this, $root, or $(TagName)) in your FQL expression. Context is what's available; Scope is how you choose which context to reference.

Custom Components Reusable groups of Components saved by users for repeated use within a project. They appear in the "Custom" tab of the Components Panel and are created by right-clicking a component or group in the Structure Panel or Canvas and selecting "Create Component".

D

Data Binding See Attaching Data.

Data Environment A named set of configuration values (API keys, endpoints, test data) used by integrations and Environment Variables. Projects can have unlimited Data Environments, typically organized by deployment stage (e.g., Development Data, Staging Data, Production Data). Each Publishing Environment is assigned one Data Environment to determine which configuration values are active. Data Environments are configured in Project Settings and enable the same project to connect to different backends or use different credentials based on the deployment context.

Data Inspector / Data Picker A tool that opens when you choose to attach data to a component property. It allows you to browse and select available Data Sources (like Environment Variables, DeviceInfo, GlobalState, RouteData, OverlayData, or Data Zones) and construct FQL expressions to use their data dynamically.

Data Panel (Right Sidebar) One of the tabbed panels in the Right Sidebar of Layouts Mode, used for managing data aspects of selected components. This often involves Attaching Data or configuring data-related properties.

Data Sources (for Data Binding) Various origins from which dynamic data can be pulled for use in Components via Attaching Data and FQL. Common sources include Environment Variables, DeviceInfo (information about the user's device), GlobalState (data stored via Set State Flow nodes), RouteData (parameters from the current URL), OverlayData (data passed to an Overlay), and Data Zones.

Data Zone (Component) A container component that makes data available to all child components nested within it. Unlike a View, which provides only visual grouping, a Data Zone creates a named data context that children can access using FQL. Data can come from static JSON, a Flow, RouteData, OverlayData, GlobalState, Environment Variables, or form input from child components.

Child components reference a Data Zone's data using the $(TagName) scope in FQL — for example, {{ $(Product).title }}. When Data Zones are nested, $this resolves to the innermost context. Use $(TagName) to reference a specific named Data Zone when multiple are present.

• When to use: Use a Data Zone when multiple child components need access to the same data source, or when you need a named scope that can be referenced specifically in FQL.
• When not to use: If only a single component needs data, bind directly to RouteData, GlobalState, or an Environment Variable instead.

Delay (Operator Node) An Operator Node in Flows that pauses the execution of the Flow for a specified period of time (in milliseconds) before proceeding.

Display (Layout Property) A property in the Appearance Panel (under Layout) that controls the visibility of a Component. It can be set to "Flex" or "Block" to show the component, or "None" to hide it and its children.

E

Effects (Appearance Panel) A section within the Appearance Panel used to apply visual effects to box shadows (color, opacity, radius, blur).

Entry Node (Flows) The starting point for every Flow created in Flows Mode. The logic of the Flow begins here and follows the Connections to other Nodes. The Entry Node is also where you can rename the Flow and define its Flow Schema (expected inputs).

Environments (Project Settings) A feature in Project Settings that allows you to define different sets of values for your Environment Variables based on the context, such as "Development," "Testing," or "Production". One environment is set as the default, and you can switch between environments for previewing in Layouts Mode.

Environment Variables These could be things like secret codes for connecting to other services (API keys), labels for buttons, or other settings. You set these up in Project Settings. Once defined, you can easily use these values anywhere in your project, especially when working with FQL or Flows. The cool part is that the actual text on the 'note pad' can change depending on the Environment your app is running in (like a 'testing' version having different codes than your 'live' version).

F

Fallback Route A special Route defined in Project Settings that specifies which Layout should be displayed when a user navigates to a URL that doesn't match any defined routes in your application. This will be presented as a "404" / "Not Found" page.

Flex Direction (Layout Property) A CSS Flexbox property available in the Appearance Panel (under Layout) that defines how child Components are arranged within a parent container (e.g., a View). Options include "Column" (vertical stacking, top-to-bottom), "Row" (horizontal arrangement, side-by-side), "Reverse Column," and "Reverse Row".

Flex Wrap (Layout Property) A CSS Flexbox property in the Appearance Panel (under Layout) that controls whether child Components within a container can wrap onto multiple lines if they exceed the container's available space along the main axis. Options are "No Wrap" (items shrink or overflow), "Wrap," and "Wrap Reverse".

Flexbox A CSS layout standard that Shipcode implements through the Layout section of the Appearance Panel to help you arrange Components on your screen. Flexbox is designed to make it easier to: 

• Line up your components neatly. 
• Control how space is shared between components. 
• Decide if components should stack vertically, sit side-by-side horizontally, or even wrap to a new line if there isn't enough room.

Flow A single set of connected Nodes that executes a specific logic sequence. Each Flow has one Entry Node where execution begins and can have multiple execution paths determined by Operator Nodes. Flows are triggered by Interactions defined in Layouts Mode (such as On Press, On Initialize, or On Submit events). A Flow might fetch data from an API, transform it, update application state, and trigger navigation—all in one connected sequence.

Flow Schema Defines the expected inputs for a Flow. This is configured in the Entry Node of the Flow and helps in understanding what data a Flow needs to operate correctly.

Flows A set of step-by-step instructions that you create to tell your app how to do things behind the scenes. They are the main way you add logic to your app, like: 

• Getting information from the internet (from APIs or other websites). 
• Changing or organizing that information. 
• Making the app perform actions, like navigating to a new screen or showing a message.

You build and manage these instruction sets in Flows (accessible via the top navigation). Each step in a Flow is a building block called a Node (which can be an Action or an Operator), and you link them together with Connections to show the order of operations. Often, the information that a Flow works with can then be used to display changing content in your app's screens (Layouts Mode), usually by sending it to a Data Zone.

• How Flows connect to Layouts: Flows are triggered by Interactions defined in the Interactions Panel in Layouts Mode. Common trigger events include On Press (button clicks), On Initialize (when a Layout loads), or On Submit (form submission). A typical pattern is: user interacts with Layout → triggers Flow → Flow fetches/processes data → Flow updates Data Zone or GlobalState → Layout displays updated data.
• Common flow patterns: Data fetch flows (API request → Update Props → populate Data Zone), navigation flows (user action → Navigate node), state management flows (form submission → Set State → confirmation), and error handling flows (Try node → success or error path).

Flows List (Flows Mode) A panel within Flows Mode, in the Left Sidebar, that displays all the Flows created for your current project. You can select a Flow from this list to view and edit it on the Canvas.

Flows Mode The dedicated editor in Shipcode where you create, manage, and test the logic of your application using Flows. It features a Canvas for arranging Nodes and Connections, a Left Sidebar for accessing the Flows List and Nodes Panel, and a Right Sidebar for the Properties Panel.

Focus Mode A viewing mode in Layouts Mode that allows you to "zoom in" on a single Layout, providing an uncluttered space for detailed work and, importantly, for previewing the Layout across different Breakpoint Controls (device sizes). You can enter Focus Mode by clicking an icon on the Layout or using a keyboard shortcut.

Font Family (Typography) A property in the Typography section of the Appearance Panel that allows you to choose the typeface design for text-based Components. Shipcode includes a default "System" font and allows you to upload and use custom font files (e.g., .ttf, .otf).

Font Style (Typography) A property in the Typography section of the Appearance Panel that allows you to choose the style of the selected Font Family. For example, if you upload an entire family, you will likely be able to pick from a number of different styles, such as “Regular” or “Semibold.” This property appears only if a custom font family is selected; when using “System,” the Font Weight property will appear instead.

Font Weight (Typography) A property in the Typography section of the Appearance Panel that specifies the thickness or boldness of the characters in a font. It's typically set using numerical values (100-900) or predefined names like "Regular" (400) and "Bold" (700). This property only appears when using the “System” font family; for custom fonts, the Font Style property will appear instead.

Footer (Web Navigation) A layout, typically containing links and copyright information, that will be displayed at the bottom of every page when your project is displayed as a PWA. The specific layout can be selected in the “Web Navigation” section of Project Settings.

FQL (Functional Query Language) Shipcode's own mini-language that helps you work with data that changes in your app. Think of it as a set of instructions you write to tell your app how to find, change, or show specific pieces of information in your Components. You'll see FQL instructions written inside double curly braces, like this: {{ an FQL instruction }}. These instructions can: 

• Point to where the data is (Scopes and Context). 
• Pinpoint the exact piece of data you want (Paths). 
• Change or reformat the data (Pipes).

How to access FQL: Access FQL through the Data Inspector (data picker icon) that appears when you hover over compatible fields in the Right Sidebar. Any Component property that supports data binding shows this picker icon. Click it to browse available data sources and construct FQL expressions.

Understanding Scope and Context: Context refers to the available data environment (like a Data Zone's dataset, RouteData from the URL, or GlobalState). Scope is how you select which Context to query using keywords like $this (current context), $root (outermost context), $(TagName) (specific named Data Zone), or $parent[n] (parent context). Context is what's available; Scope is your selector.

Common use cases: Display dynamic product names, show user-specific information, populate lists with API data, conditionally show/hide elements based on state, format dates or prices, calculate values based on other data.

G

Get State (Flow Node) An Action Node in Flows used to retrieve data that was previously stored on the user's device or browser using the Set State Node, scoped to this application. You need to provide the same key and storage type (Temporary, Persistent, or Secure) that was used when the data was set. Retrieved data becomes available in the Flow context and can be passed to subsequent nodes or used to update application state.

GlobalState (Data Source) A system-level Data Source available for Data Binding that allows Components to access data stored in global state, as populated by Set State Flow nodes.

Scope and persistence: GlobalState is application-wide and persists across navigation between Routes. Data stored in GlobalState remains available until explicitly cleared, the app is closed (for Temporary storage), or the app is uninstalled (for Persistent storage). Use GlobalState when multiple Layouts or Components across different Routes need access to the same data.

Comparison to other data sources:

• GlobalState: Application-wide, persists across navigation, populated by Set State nodes
• RouteData: Specific to current URL, includes path and query parameters, resets on navigation
• OverlayData: Scoped to specific overlay instance, passed via Open Overlay node

GraphQL (Flow Node & API) A query language for APIs and an Action Node in Shipcode Flows that facilitates connecting to GraphQL APIs. The node provides a GUI editor to explore the API's schema, select data fields (queries), define variables for filtering, and construct mutations (actions to change server data).

Graph QL Schema The structure definition of a GraphQL API describing available queries, mutations, and data types, visible in the GraphQL node's GUI editor for building requests. Shipcode automatically retrieves the schema when you configure a GraphQL endpoint, allowing you to browse available data fields, select what to query, and understand the API's structure without referring to external documentation.

H

Header (Layouts Mode) The top bar in your project.. It contains quick access links to different modes (Layouts, Flows, Settings), the project name, project sync status, collaborator avatars, Undo/Redo buttons, a Preview button, and access to Account Details and Project Settings via the user's avatar.

Header (Web Navigation) A layout, typically containing a logo and top-level navigation, that will be displayed when your project is displayed as a PWA. The specific layout can be selected in the “Web Navigation” section of Project Settings.

Home Route A specific Route, with a path set to a single forward slash (/), that defines which Layout will be displayed when a user navigates to the home page of a Progressive Web App (PWA), such as www.example.com. 

The Home Route is specific to PWA deployments; native app home screens are typically determined by the initial Route in the Bottom Bar (Tab Bar) navigation.

HTTP Method The type of request sent to an API, selected in the Network Request Flow node configuration. Common HTTP methods include:

• GET: Retrieve data from the server without modifying it
• POST: Send data to the server to create a new resource
• PUT: Update an existing resource with complete replacement
• PATCH: Partially update an existing resource
• DELETE: Remove a resource from the server

The HTTP method determines how the server processes your request and is a fundamental part of RESTful API communication.

I

Image (Component) A basic Component used to display image assets (e.g., JPEG, PNG, GIF) in your Layouts. The Image component acts as a container for the actual image file. You set the dimensions of the container and then use the "Resize Mode" property (e.g., Cover, Contain, Stretch) to control how the image fits within those dimensions. Dynamic images can be displayed by binding its source to a value using FQL.

Interactions / Interactions Panel A feature and a corresponding panel in the Right Sidebar of Layouts Mode that allows you to define what happens when a user interacts with a Component or when a Layout meets certain lifecycle criteria. You can trigger a Flow or a built-in action (like toggling an Accordion) in response to events such as "On Initialize" (when the component loads), "On Press" (click/tap), "On Hover In/Out," etc.

iOS One of the native mobile platforms (along with Android) for which Shipcode can build applications.

J

JSON JavaScript Object Notation, a standard text format for representing structured data using key-value pairs and arrays. Used throughout Shipcode for API responses, static data entry in Data Zones, Flow node configuration, and data storage. FQL can parse and manipulate JSON data. JSON uses a specific syntax: objects are wrapped in curly braces { }, arrays in square brackets [ ], strings in quotes " ", and supports numbers, booleans (true/false), and null values.

Justify Content (Layout Property) A CSS Flexbox property in the Appearance Panel (under Layout) used to align child Components along the main axis of their container when there is extra space. If Flex Direction is "Row," it controls horizontal alignment; if "Column," it controls vertical alignment. Options include "Start," "Center," "End," "Space Between," "Space Evenly," and "Space Around"

L

Launchpad A default Library that comes enabled with every new Shipcode project. It provides a wide range of preset Components and potentially other resources to get started with building applications.

Layout A single screen, page, or view within your application. Layouts are organized within Storyboards and are built by adding and arranging Components on the Canvas. Layouts can also be used for modals. They are represented as rectangles on the Canvas and listed in the Structure Panel.

• Relationship to Routes: Layouts become accessible URLs when associated with Routes in Project Settings. A Layout can be accessed in three ways: 
• • As a Route-based page with its own URL
  • As an Overlay displayed on top of other content using Open Overlay Flow nodes
• Distinction from Overlays: Overlays are Layouts displayed on top of other content using Open Overlay Flow nodes, rather than being associated with Routes. The same Layout can function as both a Route-based page and an Overlay depending on how it's invoked.

Layout Panel (Right Sidebar) A panel in the Right Sidebar of Layouts Mode that provides configuration options specific to the currently selected Layout on the Canvas. This includes associating the Layout with a Route, setting its user-facing Title (for browser tabs), adding PWA metadata, and specifying which App Top Bar or App Bottom Bar it should use.

Layouts Mode The primary visual development environment in Shipcode where you design and build the user interface of your application. It consists of a Header, Left Sidebar (with Structure Panel, Components Panel, Assets Panel, Versions Panel), a central Canvas for arranging Layouts in a Storyboard, and a Right Sidebar (with Appearance Panel, Settings Panel, Universal Access Panel, Interactions Panel, Layout Panel, Data Panel).

Left Sidebar (Layouts Mode) A vertical panel on the left side of the Layouts Mode interface. It contains tab icons that open flyout panels for project-wide elements: the Structure Panel (for Storyboards and Layout hierarchy), the Components Panel (to add components), the Assets Panel (for images/videos), and the Versions Panel (for version control).

Libraries (Project Settings) Collections of resources, such as pre-designed Components and Flows, that can be enabled in a project to extend its functionality, often for integrating with third-party services (e.g., Shopify). Managed in Project Settings, Libraries may require configuration using Environment Variables. 

Libraries are great for adding new features and capabilities to your project. They are often used to help your Shipcode app connect and work with other services or platforms, like Shopify, for instance.

To get some Libraries working correctly, you might need to provide specific details or settings for them. You do this using something called Environment Variables.

When you start a new project in Shipcode, it automatically comes with the Launchpad library. This is a standard library full of common tools and components to get you started.

• Note: after you’ve made the project your own, if you want to use the elements from your project across other projects, you can can make your project a library by setting the access to public in Project Settings > Advanced

Link (Component) A preset container Component that makes its child elements clickable, triggering navigation to a specified path (Route) when tapped or clicked. It is configured using the "Link To" property (for the destination path) and an "Open In New Tab" option.

M

Margin The space outside the border of a Component, used to create separation between it and other elements on the page. Configured in the Spacing section of the Appearance Panel.

Members (Project Settings) A section in Project Settings where you can invite users to collaborate on your project and manage their access permissions by assigning roles (e.g., Admin, Publisher, Contributor, Viewer).

Metadata (Layout Panel) Allows you to add HTML <meta> tags (e.g., description, keywords) to a Layout's header when the application is served as a Progressive Web App (PWA), which can help with SEO. Configured in the Layout Panel for a selected Layout or by using the Set Metadata action in Flows Mode.

Mutation (GraphQL) A GraphQL operation that modifies data on the server (creating, updating, or deleting records), as opposed to Queries which only read data. Mutations are built using the GraphQL node's GUI editor in Flows Mode by selecting mutation operations from the API's schema. After a mutation executes, the API typically returns the modified data, which can be used to update your application's UI through Update Props or Set State nodes.

N

Native App An application built specifically for a particular mobile operating system, such as iOS or Android. Shipcode supports building native apps.

Navigate (Flow Node) An Action Node in Flows that, when invoked, directs the application to navigate to a specified Route (URL path).

Nesting The action of putting Components inside other Components. Think of it like putting smaller boxes inside a bigger box. Most often, you'll place components inside a View component, which acts as a container. Doing this helps you organize your screen (Layout) and build more complex designs. The Structure Panel shows you a list of how your components are nested and makes it easy to rearrange them.

Network Request (Flow Node) An Action Node in Flows used for making HTTP requests to APIs that do not use GraphQL. It allows configuration of the URL, HTTP method (GET, POST, etc.), headers, request body data, query parameters, and timeout.

Nodes (Flows) The individual building blocks within a Flow in Flows Mode. Nodes perform specific actions (see Actions (Flow Nodes)) or control the logic and execution path of the Flow (see Operators (Flow Nodes)). They are dragged from the Nodes Panel onto the Canvas and linked by Connections.

Nodes Panel (Flows Mode) A panel in the Left Sidebar of Flows Mode that displays all available Action Nodes and Operator Nodes which can be dragged onto the Canvas to build a Flow.

O

Open Overlay (Flow Node) An Action Node in Flows that triggers a UI Overlay (like a modal or popover) to appear on the user's screen, rendering a specified Layout within it. Data can be passed to the overlay using this node, and the overlay can be given a unique ID for later updates.

Operators (Flow Nodes) A category of Nodes used in Flows Mode to control the flow of execution and apply logic. Examples include Conditional (for if/else logic), Delay (to pause execution), Split (to create parallel or serial execution paths), and Try (for error handling).

Operator Notes Nodes in Flows Mode that control execution flow and logic rather than performing actions. Operator Nodes determine the path a Flow takes based on conditions, timing, or error states. Examples include:

• Conditional: If/else logic to execute different paths based on a condition
• Delay: Pause execution for a specified time
• Split: Create parallel or serial execution paths
• Try: Error handling to gracefully manage failures

Operator Nodes contrast with Action Nodes, which perform specific operations like fetching data, navigating, or updating state. Operator Nodes shape how and when Action Nodes execute.

OverlayData (Data Source) OverlayData is scoped to a specific overlay instance and persists only while that overlay is open. Data is cleared when the overlay is closed. Use OverlayData to pass context-specific information to overlays, such as the product being viewed in a product detail modal or form data being edited.

Comparison to other data sources:

• GlobalState: Application-wide, persists across navigation
• RouteData: Specific to current URL, resets on navigation
• OverlayData: Scoped to specific overlay instance, cleared when overlay closes

Overlays User interface elements, such as modals or popovers, that appear on top of the main application content. In Shipcode, Layouts can be designed to function as overlays. They are managed using  the Open Overlay, Update Overlay, and Close Overlay Flow actions.

P

Padding The space inside the border of a Component, between the component's edge and its actual content (e.g., text within a text box). It creates "breathing room" for the content. Configured in the Spacing section of the Appearance Panel.

Path (FQL) Part of an FQL (Functional Query Language) expression that selects specific data from within a chosen Scope (data context). Paths use dot notation (e.g., object.property) or index notation (e.g., array[0], object['property-name']) to navigate through objects and arrays.

Pipes (FQL) Functions in FQL (Functional Query Language) used to manipulate or transform data that has been selected by a query root or passed from another Pipe. Pipes are chained using the | symbol (e.g., {{ data | pipeName }}), and can accept arguments (e.g., {{ data | pipeName:arg1:arg2 }}). Examples of Pipes include “capitalCase” (which capitalizes each word of a given string) and sum (which adds numerical values together).

Position (Layout Property) A property in the Appearance Panel (under Layout) that controls how a Component is positioned within the layout flow. Options include:

• Relative: The component is positioned according to the normal flow, and then offset based on top/right/bottom/left values without affecting other elements.
• Absolute: The component is removed from the normal flow and positioned relative to its nearest positioned ancestor (or the initial containing block) based on top/right/bottom/left values.

Preset Components Standard, out-of-the-box Components provided by Shipcode (often through the Launchpad library) that are ready to be used in projects. Examples include Accordion, Background Image, Carousel, Data Zone, Form Components (like Text Input, Selection Group, Toggle), Grid, Image, Link, List, Text, and View.

Project Dashboard The initial screen displayed after logging into Shipcode, where you can view a list of all your projects, create new projects, and rename or delete existing ones. You can return to the dashboard by clicking the Shipcode logo.

Project Settings A section where you can configure various settings specific to your current project. This includes general settings (like project name, header/footer layouts for PWAs), managing project Members and their roles, App Navigation (Top/Bottom Bars), Routes, enabling and configuring Libraries, defining Data Zones (coming soon), managing Environments and Environment Variables, and Domains (coming soon). Accessed by clicking your profile icon in the Header and selecting "Project Settings".

Progressive Web App (PWA) A type of web application that can be "installed" on a user's home screen, receive push notifications, and work offline, offering an app-like experience in a web browser. Shipcode supports building PWAs.

Properties Panel (Flows Mode) A panel in the Right Sidebar of Flows Mode that displays configurable options and settings for the currently selected Node or Connection on the Canvas.

Promote The action of making a saved Version of your Shipcode project available in a testing Publishing Environment. This is done using the Versions Panel. When using the default Environment structure for new projects, a version will be promoted to “Staging,” after which it can be Published to “Production.”

Publish The action of making a saved Version of your Shipcode project live and accessible to end users. This is done from the “Publishing” tab in the Versions Panel. A version must first be Promoted to all lower Publishing Environments before it can be made live on production.

Publishing Environment Deployment stages for your application that control the promotion sequence for Versions. Default Publishing Environments are Draft, Staging, and Production, but these can be customized. 

Versions must be Promoted through lower Publishing Environments (e.g., Draft → Staging) before being Published to Production. Each Publishing Environment is assigned one Data Environment to determine which configuration values (API keys, endpoints) are active. Publishing Environments are configured in Project Settings and each can have a custom domain assigned.

Q

Query (GraphQL) A GraphQL operation that requests specific data from an API without modifying it. Queries are built using the GraphQL node's GUI editor in Flows Mode by selecting fields from the API's schema. GraphQL queries allow you to request exactly the data you need (avoiding over-fetching), request data from multiple resources in a single request, and specify the structure of the response. The data returned by a query can be passed to Data Zones or used in subsequent Flow nodes.

R

Right Sidebar (Layouts Mode) A vertical panel on the right side of the Layouts Mode interface. It contains tab icons that open flyout panels for managing configuration properties of selected Layouts or Components.

These include the Appearance Panel (styling), Settings Panel (component-specific configurations), Universal Access Panel (accessibility), Interactions Panel (event handling), Layout Panel (layout-specific settings), and Data Panel (data binding).

Role (Accessibility) A predefined attribute in the Universal Access Panel that describes the semantic purpose of a UI Component to assistive technologies like screen readers (e.g., "button," "heading," "link," "tab," "listitem"). This helps provide context beyond the visual appearance of the component.

Root (FQL) When you write an instruction in FQL (Functional Query Language), the Root is the very first part of that instruction. Its job is to tell FQL where to begin looking for data. Usually, the Root points to a specific Context (a source of data in your app) using a special keyword called a Scope (like $this for the current spot, $root for the main data area, or $(TagName) to pick a specific named data source). Sometimes, instead of pointing to a data source, the Root can just be a fixed piece of information (like a specific number or word) that you want to then change or use with FQL's formatting tools (Pipes).

RouteData (Data Source) A system-level Data Source available for Data Binding that provides information about the current Route used to navigate to the active Layout. This can include path parameters (from dynamic routes like /products/:id) and query parameters from the URL (like /search?q=shoes).

Scope and persistence: RouteData is specific to the current URL and resets on navigation to a different Route. Use RouteData to access URL-based information like product IDs, search terms, or filters passed through the URL.

Comparison to other data sources:

• GlobalState: Application-wide, persists across navigation
• RouteData: Specific to current URL, resets on navigation
• OverlayData: Scoped to specific overlay instance

Routes The mechanism for defining the navigation structure within your Shipcode application. Routes consist of a Path (e.g., /home, /products/:id), an optional title (for internal reference), and an assignment to a specific Layout that should be displayed when the path is accessed. They are managed in Project Settings under "Routes" or can be associated with Layouts via the Layout Panel. Routes can be static or dynamic (containing parameters).

• Dynamic routes and parameters: Routes support dynamic parameters using colon syntax (/products/:id, /categories/:categoryId/items/:itemId) that match any value in that position. Routes also support query parameters (/search?q=shoes&size=10). Access these values through the RouteData data source in FQL and Data Binding. Dynamic parameters enable you to create one Layout that displays different data based on the URL.
• Relationship to navigation: Use the Navigate Flow node to direct users to specific Routes. The Back Flow node returns users to their previous Route. Routes are the primary navigation mechanism for web-based (PWA) applications; native apps also use Routes but typically layer App Navigation (Top Bar and Bottom Bar) on top.

S

Scope (FQL) A signpost that tells your FQL instruction which specific Context (or data source) to get information from. Since your app can have layers of data, the Scope helps FQL know exactly which layer to look at. Some common Scopes you might see are:

• $this: This usually means "look at the data available right here where this FQL instruction is." It's often the default if no other scope is mentioned.
• $root: This typically points to the main or outermost data layer available.
• $parent[n]: This lets you go "up" a level to get data from a parent or enclosing context.
• $(TagName): If a data source has been given a specific name (a "tag"), you can use this to point directly to it, like $(ProductDetails).

Set State (Flow Node) An Action Node in Flows that allows you to store string data on the user's device or in their browser session. Data can be stored as "Temporary" (lost on app close), "Persistent" (permanently stored, unencrypted), or "Secure" (native only, encrypted and permanently stored). This data can then be retrieved using the Get State node within a Flow or accessed through the GlobalState data source when working in the Canvas.

When to use each storage type:

• Temporary: Session-only data that should disappear when the app closes (e.g., shopping cart contents during browsing, temporary form state)
• Persistent: Data that survives app restarts but doesn't need encryption (e.g., user preferences, UI settings, recently viewed items)
• Secure (native only): Sensitive data requiring encryption (e.g., authentication tokens, user credentials)

Relationship to GlobalState: Data stored with Set State becomes available through the GlobalState data source, making it accessible to Components throughout your application via FQL and data binding.

Settings Panel (Right Sidebar for Components) A tabbed panel within the Right Sidebar of Layouts Mode, distinct from the main Project Settings. When a Component is selected, this panel shows component-specific configuration options (props) that are not directly related to visual styling (which is handled by the Appearance Panel) or interactions. For example, for a Data Zone, it would contain settings for its data source type and active slot; for an Image component, it might contain the image source URL.

Slot (Data Zone) A visibility label assigned to a child component inside a Data Zone. Child components assigned a Slot label are hidden by default. They only become visible when the parent Data Zone's Active Slot value exactly matches their Slot label. Common labels include idle, loading, loading-more, and failure, though any custom label is supported.

Slot is configured in the Settings Panel of the child component. See also: Active Slot (Data Zone).

Spacing (Appearance Panel) A section within the Appearance Panel where you can control the space around and inside Components using Margin (outside spacing) and Padding (inside spacing).

Split (Operator Node) An Operator Node in Flows that allows you to create multiple paths of execution from a single point, meaning it can connect to multiple subsequent Nodes. It supports two strategies: "Parallel" (executes all connected nodes simultaneously) and "Serial" (executes them one at a time, waiting for each to complete).

Storyboard A visual container or canvas within Layouts Mode used for organizing and grouping related Layouts (screens or pages) of your application. Think of it as a folder for different views of a feature or section. You can have multiple Storyboards in a project, and you switch between them using the Structure Panel. Storyboards support real-time collaboration.

• Organizational strategies: Organize Storyboards by feature area (e.g., "Checkout Flow", "User Profile", "Product Catalog") or by user journey stage (e.g., "Onboarding", "Shopping", "Account Management"). This grouping is purely organizational and doesn't affect application functionality.
• Relationship to Routes and navigation: Layouts within a Storyboard don't automatically connect to each other. Use Routes (defined in Project Settings) and Navigate Flow nodes to link Layouts together. Storyboards are organizational containers, not navigation structures. A user journey that spans multiple Layouts might be organized within one Storyboard, but the actual navigation between those Layouts is controlled by Routes and Flows.

Structure Panel A list you'll usually find in the Left Sidebar when you're in Layouts Mode. It shows you how all the visual parts of your project are organized, like an outline or a family tree. In this panel, you can see:

• Your Storyboards (which are like folders for your screens).
• The Layouts (individual screens) inside each Storyboard.
• All the Components (buttons, text, images, etc.) on each Layout, and how they are Nested (placed inside one another). The Structure Panel is very useful because you can click on items in the list to select them on your screen, rename them, drag them to change their order, or even group them differently. You can also do things like delete parts or save a group of components as a reusable template from here.

T

Tag (Data Zone) A unique identifier given to a Data Zone to reference it specifically in FQL expressions. Tags are set in the Data Zone's Settings Panel and accessed using $(TagName) syntax in FQL Scopes. Tags enable precise data source selection when multiple Data Zones exist on a Layout or when you need to access a specific Data Zone's data from deeply nested components. For example, if you tag a Data Zone as "ProductDetails", you can access its data from anywhere using {{ $(ProductDetails).name }}.

Text (Component) A fundamental preset Component used for displaying all kinds of text in a Layout, such as headings, paragraphs, labels, etc.. Its appearance (font, size, color, alignment, etc.) is styled using the Typography section of the Appearance Panel.

Template Preconfigured starting points for projects. Shipcode Templates may include fully designed layouts, styles, and component structures modeled after “fake” branded experiences, or they may serve as minimal wireframes to support faster prototyping. Templates are designed to accelerate development and ensure consistency across projects, whether starting from a high-fidelity mockup or a basic structural foundation.

Top Bar / Action Bar (App Navigation) A navigation element, usually at the top of the screen in mobile apps. It typically contains a back button, the screen's title, and may include an optional action button or icon on the right. Managed under App Navigation in Project Settings.

Try (Operator Node) An Operator Node in Flows that allows for basic error handling. It attempts to execute a connected Node; if that Node encounters an error, the Flow execution is directed to a second, alternative Node connected to the Try node's error path.

Typography (Appearance Panel) A section within the Appearance Panel dedicated to styling text-based Components. It includes options for Font Family, Font Weight, Font Size, Line Height, Letter Spacing, Text Color, Text Alignment, Text Transform (uppercase, lowercase, capitalize), and Text Decoration (underline, strikethrough, italic).

U

Universal Access / Universal Access Panel A concept and a corresponding panel in the Right Sidebar of Layouts Mode focused on making your application accessible to users with disabilities, particularly those using screen readers. It provides tools to set Accessibility Labels, Accessibility Hints, manage the Accessible Toggle, and assign semantic Roles to components.

Update Overlay Data (Flow Node) An Action Node in Flows that allows you to update the data within an Overlay that is already open on the user's screen, provided the overlay was opened with a unique ID.

Update Props (Flow Node) An Action Node in Flows that takes the data fetched by a preceding node (like GraphQL or Network Request) and specifies how this data should be passed into the application's properties, making it available for Components to consume via Data Zones. It offers strategies like "Append" (add to existing data), "Replace" (overwrite existing data), or "Merge" (combine with existing data) for handling new data in relation to existing properties.

• Distinction from Update Overlay Data: Update Props sends Flow data to Data Zones in the current Layout. Update Overlay Data sends data to an already-opened Overlay using the Overlay's ID. Use Update Props for updating the active Layout; use Update Overlay Data for updating overlays displayed on top of the Layout.

User Can refer to two types of individuals:

• The end-user who interacts with the application built using Shipcode.
• A Shipcode platform user, often managed under Members in Project Settings, who collaborates on building the application.

V

Version A saved snapshot of your project at a specific point in time, including all Layouts, Components, Flows, settings, and configurations. Versions are created manually using the keyboard shortcut (Cmd/Ctrl+S) or from the Versions Panel in the Left Sidebar. Each Version captures the complete state of your project, enabling you to:

• Promote the Version through Publishing Environments (Draft → Staging → Production)
• Roll back to the Version if you need to undo changes
• View Version history to see when changes were made and by whom

Versions are large files, so it's recommended to save at meaningful milestones rather than continuously. Always save a Version before promoting to a new Publishing Environment.

Versions Panel A panel in the Left Sidebar of Layouts Mode that provides version control for your project. It lists every saved version of the project, showing when it was saved and its publish status. From here, you can save new versions, Publish a version to make it live, or roll back to a previous version.

View (Component) A View is one of the most basic and useful Components in Shipcode. Think of it as an empty box or a container that you can use to hold and organize other components. You'd use a View to:

• Group several components together so you can treat them as a single unit (like moving them all at once).
• Apply a style (like a background color or a border) to a whole section of your screen.
• Arrange components into rows, columns, or more complicated designs using Flexbox tools. Just like real boxes, you can put Views inside other Views to build up the structure of your page.

Z

Z-Index (Position Property) A property found in the Position section of the Appearance Panel that controls the stacking order of Components when they overlap on the Canvas or in the final application. A component with a higher Z-Index value will appear on top of a component with a lower value. This is typically used when a component is positioned using “Absolute” positioning.