### Flows JavaScript SDK - Installation and Usage Example
Source: https://flows.sh/docs/javascript/overview
Illustrates how to get started with the Flows JavaScript SDK, likely involving installation and basic usage patterns. The example points to an 'installation' page for detailed steps.
```javascript
// Example of how to get started with the Flows JavaScript SDK.
// Refer to the 'installation' page for detailed setup instructions.
// Assuming the SDK is installed and imported:
// import { Flows } from 'flows-js-sdk';
// Initialize Flows SDK (example):
// const flows = new Flows();
// Use Flows SDK features (example):
// flows.someFunction();
// For component usage, refer to the components package documentation.
// Example:
```
--------------------------------
### Getting Started Section
Source: https://flows.sh/solutions/product-led-growth
Provides introductory text for users. Includes a main title 'Getting started' and a subtitle guiding users to follow steps.
```javascript
{
"ref": "$undefined",
"className": "mt_space4 textStyle_titleS ta_left c_newFg.neutral",
"children": "Getting started"
}
```
```javascript
{
"ref": "$undefined",
"className": "mt_space2 textStyle_bodyXxs ta_left c_newFg.neutral.muted",
"children": "Follow these steps to get started."
}
```
--------------------------------
### Flows JavaScript SDK Installation and Reference Links
Source: https://flows.sh/docs/javascript/overview
Provides direct links to the installation guide and the API reference documentation for the Flows JavaScript SDK. These resources are essential for setting up and understanding the SDK's capabilities.
```markdown
[Overview](#overview)
---------------------
Flows JS SDK is a lightweight library that allows you to integrate Flows into any application that runs JavaScript. Similar to our [React SDK](/docs/react/overview), this SDK includes a components package to simplify getting started with Flows in your application.
[Installation](./installation)
[Reference](./reference)
```
--------------------------------
### Flows SDK Installation Guide
Source: https://flows.sh/docs/javascript/overview
Instructions on how to install the Flows JavaScript SDK. This section details the necessary steps to integrate the SDK into your project.
```markdown
## Installation
Learn how to install the Flows JavaScript SDK.
```
--------------------------------
### GitHub Examples Link
Source: https://flows.sh/docs/javascript/overview
Provides a link to the flows-sdk GitHub repository for template projects and implementation examples. This helps users find practical applications of the SDK.
```html
template projects on GitHub for examples of how to implement Flows in your application.
```
--------------------------------
### Floating Checklist Component Example
Source: https://flows.sh/examples
Details for the 'Floating checklist' UI component. It serves as an interactive list of suggested setup actions for users, appearing in the corner of the screen. Includes links and image assets for different display modes.
```javascript
self.__next_f.push([
1,
"1e:[\"$\",\"$L15\",\"Floating checklist\",{\"href\":\"/examples/floating-checklist\",\"className\":\"bx-sh_antimetal bdr_radius12 bd-w_1px bd-c_newBorder.neutral.placeholder bg-c_pane.bg.elevated fast-ease-in-out_all ov_hidden hover:bd-c_newBorder.neutral.strong\",\"children\":[[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"d_flex flex-d_column p_space16 gap_space4\",\"children\":[[\"$\",\"h2\",null,{\"ref\":\"$undefined\",\"className\":\"lh_20px textStyle_titleM ta_left c_newFg.neutral\",\"children\":\"Floating checklist\"}],[\"$\",\"p\",null,{\"ref\":\"$undefined\",\"className\":\"tw_balance textStyle_bodyXs ta_left c_newFg.neutral.muted\",\"children\":\"Interactive list of suggested setup actions the user can take. Floating in the corner of the screen.\"}]]}],[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"d_flex ov_hidden px_space16 pb_space16\",\"children\":[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"d_flex ov_hidden bd-w_1px bd-c_newBorder.neutral bdr_radius6\",\"children\":[[\"$\",\"$L1b\",null,{\"width\":600,\"height\":384,\"alt\":\"Floating checklist\",\"className\":\"dark:d_none\",\"src\":{\"src\":\"/_next/static/media/floating-checklist-light.0fe79a05.png\",\"height\":768,\"width\":1200,\"blurDataURL\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAAFVBMVEX5+vz09ffp6uzv8PGanJ7d3uDc3d/UFUQLAAAACXBIWXMAAEJwAABCcAFu8l9tAAAAJklEQVR4nCXJwREAIBCDQEhO+y/ZUX/MAm0EcCe9QfQJVfMvzqwDBJoANkQlMKIAAAAASUVORK5CYII=\",\"blurWidth\":8,\"blurHeight\":5}}],[\"$\",\"$L1b\",null,{\"width\":600,\"height\":384,\"alt\":\"Floating checklist\",\"className\":\"d_none dark:d_unset\",\"src\":{\"src\":\"/_next/static/media/floating-checklist-dark.8177edf9.png\",\"height\":768,\"width\":1200,\"blurDataURL\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAAD1BMVEUdISgpLTQ0OD95fYRna3E/5XHWAAAACXBIWXMAAEJwAABCcAFu8l9tAAAAIUlEQVR4nGNgYGRkZGQAASYmJiYwAy4CYjBBmAwMLMxMAAKmACGQh9ZTAAAAAElFTkSuQmCC\",\"blurWidth\":8,\"blurHeight\":5}}]]}]]}]]
```
--------------------------------
### Flows Documentation Navigation
Source: https://flows.sh/docs
This section details the primary navigation elements and links available within the Flows documentation. It includes links to the Quickstart guide, the Flows SDK overview, and instructions for creating custom components.
```APIDOC
Flows Documentation:
Overview:
- Welcome to Flows documentation! We're here to answer your questions.
Sections:
- Get started with Flows:
- Quickstart: /quickstart
- Flows SDK: /sdk-overview
- Create Custom Components: /create-custom-components
```
--------------------------------
### User Tour Component
Source: https://flows.sh/examples
Guides users through their journey within the product. This component provides a structured way to introduce users to features and workflows. It contains a title, a descriptive text, and references to light and dark mode preview images.
```UI Component
Title: Tour
Description: Guide users along their journey through your product.
Image (Light): /_next/static/media/tour-light.png
```
--------------------------------
### UI Element: Getting Started Card
Source: https://flows.sh/solutions/feature-adoption
Renders a card component for guiding users through a process. It includes a title, description, a 'Next' button, progress indicator, and a close icon. This snippet appears to be part of a JavaScript framework, likely for UI rendering.
```javascript
self.__next_f.push([1,"47:[\"$\",\"div\",\"3\",{\"ref\":\"$undefined\",\"className\":\"d_flex px_space12\",\"children\":[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"d_flex flex-d_column ai_start bg-c_#2755F0 bdr_4px bd-c_#2755F0 bd-w_1px w_100% max-w_180 p_space12 bx-sh_newL2 gap_space8 pos_relative\",\"children\":[[\"$\",\"p\",null,{\"ref\":\"$undefined\",\"className\":\"fw_800 textStyle_titleM ta_left c_white\",\"children\":\"Getting started\"}],\"$\",\"p\",null,{\"ref\":\"$undefined\",\"className\":\"textStyle_bodyXs ta_left c_white\",\"children\":\"We’ll keep this quick and easy. Just a few steps to get you started.\"}],\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"d_flex ai_center jc_space-between mt_space12 w_100%\",\"children\":[[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"bdr_2px px_space8 py_space4 textStyle_titleS bg_white c_black\",\"children\":\"Next\"}],\"$\",\"p\",null,{\"ref\":\"$undefined\",\"className\":\"op_0.75 textStyle_titleXs ta_left c_white\",\"children\":\"1 / 8\"}]]}],\"$\",\"svg\",null,{\"height\":16,\"viewBox\":\"0 0 16 16\",\"width\":16,\"xmlns\":\"http://www.w3.org/2000/svg\",\"fill\":\"currentColor\",\"className\":\"c_white flex-sh_0 pos_absolute top_12px right_12px\",\"ref\":\"$undefined\",\"children\":[\"$\",\"path\",null,{\"d\":\"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z\"}]}]}]}]
```
--------------------------------
### Feature Hint Component Example
Source: https://flows.sh/examples
Documentation for the 'Feature hint' UI component, designed as a dismissible hint to highlight new features. It includes a descriptive title, a brief explanation, and image assets for both light and dark themes.
```javascript
self.__next_f.push([
1,
"1f:[\"$\",\"$L15\",\"Feature hint\",{\"href\":\"/examples/feature-hint\",\"className\":\"bx-sh_antimetal bdr_radius12 bd-w_1px bd-c_newBorder.neutral.placeholder bg-c_pane.bg.elevated fast-ease-in-out_all ov_hidden hover:bd-c_newBorder.neutral.strong\",\"children\":[[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"d_flex flex-d_column p_space16 gap_space4\",\"children\":[[\"$\",\"h2\",null,{\"ref\":\"$undefined\",\"className\":\"lh_20px textStyle_titleM ta_left c_newFg.neutral\",\"children\":\"Feature hint\"}],[\"$\",\"p\",null,{\"ref\":\"$undefined\",\"className\":\"tw_balance textStyle_bodyXs ta_left c_newFg.neutral.muted\",\"children\":\"Dismissible hint used to highlight a new feature in your product.\"}]]}],[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"d_flex ov_hidden px_space16 pb_space16\",\"children\":[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"d_flex ov_hidden bd-w_1px bd-c_newBorder.neutral bdr_radius6\",\"children\":[[\"$\",\"$L1b\",null,{\"width\":600,\"height\":384,\"alt\":\"Feature hint\",\"className\":\"dark:d_none\",\"src\":{\"src\":\"/_next/static/media/feature-hint-light.9bbfc9bc.png\",\"height\":768,\"width\":1200,\"blurDataURL\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAAFVBMVEX19vj5+vz8/f7l5ujt7u/Mzc/LzM3/hsG5AAAACXBIWXMAAEJwAABCcAFu8l9tAAAAJUlEQVR4nB3GwREAIAzDMDsp7D9yD/QSCqBI27xoeglC5vyMRhcEyQA8GsXIAgAAAABJRU5ErkJggg==\",\"blurWidth\":8,\"blurHeight\":5}}],[\"$\",\"$L1b\",null,{\"width\":600,\"height\":384,\"alt\":\"Feature hint\",\"className\":\"d_none dark:d_unset\",\"src\":{\"src\":\"/_next/static/media/feature-hint-dark.8177edf9.png\",\"height\":768,\"width\":1200,\"blurDataURL\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAAFVBMVEUfISkpLTQ0OD95fYRna3E/5XHWAAAACXBIWXMAAEJwAABCcAFu8l9tAAAAIUlEQVR4nGNgYGRkZGQAASYmJiYwAy4CYjBBmAwMLMxMAAKmACGQh9ZTAAAAAElFTkSuQmCC\",\"blurWidth\":8,\"blurHeight\":5}}]]}]]}]]
```
--------------------------------
### Example SVG Icon
Source: https://flows.sh/solutions/user-onboarding
An example of an SVG icon used within the UI components. This specific icon is likely a placeholder or a generic graphic element, indicated by the '$L35' placeholder for its path data.
```svg
```
--------------------------------
### Flows.sh Examples Page Layout
Source: https://flows.sh/examples
Defines the main layout for the examples page, including a header and a grid section for displaying various example components. It uses CSS classes for styling and layout.
```jsx
self.__next_f.push([
10:[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"div\",null,{\"className\":\"w_100% px_space24 pos_relative\",\"children\":[[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"d_flex flex-d_column gap_space8 py_space40 md:py_space80 ai_center max-w_1088px mx_auto\",\"children\":[[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"anim_topSlideIn_0.6s_ease-out anim-dly_0.1s op_0 anim-fm_forwards\",\"children\":\"$undefined\"}],[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"d_flex flex-d_column ai_center gap_space24\",\"children\":[[\"$\",\"h1\",null,{\"ref\":\"$undefined\",\"className\":\"anim_topSlideIn_0.6s_ease-out textStyle_title5xl ta_center c_newFg.neutral\",\"children\":\"Examples\"}],[\"$\",\"p\",null,{\"ref\":\"$undefined\",\"className\":\"max-w_580px op_0 anim_topSlideIn_0.6s_ease-out anim-dly_0.3s anim-fm_forwards tw_balance textStyle_bodyL ta_center c_newFg.neutral.muted\",\"children\":\"Learn what good product onboarding and education looks like and explore how Flows makes building it simple and easy.\"}],null]}]}]],[\"$\",\"div\",null,{\"className\":\"w_100% px_space24 pos_relative\",\"children\":[[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"max-w_1088px mx_auto\",\"children\":[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"d_grid grid-tc_1fr gap_space20 sm:grid-tc_1fr_1fr md:grid-tc_1fr_1fr_1fr md:mx_space32\",\"children\":[[\"$\",\"$L15\",\"Card\",{\"href\":\"/examples/card\",\"className\":\"bx-sh_antimetal bdr_radius12 bd-w_1px bd-c_newBorder.neutral.placeholder bg-c_pane.bg.elevated fast-ease-in-out_all ov_hidden hover:bd-c_newBorder.neutral.strong\",\"children\":[[\"$\",\"div\",null,{\"ref\":\"$undefined\",\"className\":\"d_flex flex-d_column p_space16 gap_space4\",\"children\":[[\"$\",\"h2\",null,{\"ref\":\"$undefined\",\"className\":\"lh_20px textStyle_titleM ta_left c_newFg.neutral\",\"children\":\"Card\"}],[\"$\",\"p\",null,{\"ref\":\"$undefined\",\"className\":\"tw_balance textStyle_bodyXs ta_left c_newFg.neutral.muted\",\"children\":\"A custom card component built to render content inside your product, not above\"}],null]}]}]],\"$undefined\"}]}]}]])
```
--------------------------------
### Onboarding Hub Component
Source: https://flows.sh/examples
Details for the 'Onboarding hub' UI component. It serves as a central place for onboarding and help resources within an application. Includes descriptive text and links to light/dark mode image assets.
```javascript
self.__next_f.push([
1,
"20:[\"$\",\"$L15\",\"Onboarding hub\",{\"href\":\"/examples/onboarding-hub\",\"className\":\"bx-sh_antimetal bdr_radius12 bd-w_1px bd-c_newBorder.neutral.placeholder bg-c_pane.bg.elevated fast-ease-in-out_all ov_hidden hover:bd-c_newBorder.neutral.strong\",\"children\":[[ \"$\", \"div\", null, { \"ref\": \"$undefined\", \"className\": \"d_flex flex-d_column p_space16 gap_space4\", \"children\": [[ \"$\", \"h2\", null, { \"ref\": \"$undefined\", \"className\": \"lh_20px textStyle_titleM ta_left c_newFg.neutral\", \"children\": \"Onboarding hub\" } ], [ \"$\", \"p\", null, { \"ref\": \"$undefined\", \"className\": \"tw_balance textStyle_bodyXs ta_left c_newFg.neutral.muted\", \"children\": \"A home in your app for onboarding and help resources\" } ]] } ], [ \"$\", \"div\", null, { \"ref\": \"$undefined\", \"className\": \"d_flex ov_hidden px_space16 pb_space16\", \"children\": [ \"$\", \"div\", null, { \"ref\": \"$undefined\", \"className\": \"d_flex ov_hidden bd-w_1px bd-c_newBorder.neutral bdr_radius6\", \"children\": [[ \"$\", \"$L1b\", null, { \"width\": 600, \"height\": 384, \"alt\": \"Onboarding hub\", \"className\": \"dark:d_none\", \"src\": { \"src\": \"/_next/static/media/onboarding-hub-light.7b639885.png\", \"height\": 768, \"width\": 1200, \"blurDataURL\": \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAADFBMVEX6+vz09fjl5ujv8PLGKKqTAAAACXBIWXMAAEJwAABCcAFu8l9tAAAAH0lEQVR4nGNgZmJiYgABZiZmZkYQg5GJkRGVwQAhGQAELwAjb5XDSwAAAABJRU5ErkJggg==\", \"blurWidth\": 8, \"blurHeight\": 5 } } ], [ \"$\", \"$L1b\", null, { \"width\": 600, \"height\": 384, \"alt\": \"Onboarding hub\", \"className\": \"d_none dark:d_unset\", \"src\": { \"src\": \"/_next/static/media/onboarding-hub-dark.72041f88.png\", \"height\": 768, \"width\": 1200, \"blurDataURL\": \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAABlBMVEUgJCsuMjlhH6qRAAAACXBIWXMAAEJwAABCcAFu8l9tAAAAGElEQVR4nGNgYGRkZAABRhiDAUbDpWAAAAGPAA1Q9GXyAAAAAElFTkSuQmCC\", \"blurWidth\": 8, \"blurHeight\": 5 } } ]] } ]] } ]]
)
```
--------------------------------
### Onboarding Assistance and Transition Support
Source: https://flows.sh/pricing
Explains the support provided for switching to Flows, including free usage during the transition period to avoid double billing.
```javascript
self.__next_f.push([
1,
"20:[\"$\",\"$L1d\",\"Will you help us switch to Flows?\",{\"headingLevel\":\"h3\",\"title\":\"Will you help us switch to Flows?\",\"children\":[\"$\",\"p\",null,{\"ref\":\"$undefined\",\"className\":\"textStyle_bodyL ta_left c_newFg.neutral.muted\",\"children\":\"We will. We're happy to assist you with moving your existing onboarding to Flows. When transitioning to Flows from another tool, we offer free usage to cover the transition period and avoid double billing.\"}]}]\n"
])
```
--------------------------------
### Flows.sh Product Overview and Pricing
Source: https://flows.sh/solutions/revenue-expansion
Provides a summary of Flows.sh's functionality as a headless product adoption platform and details its cost structure. It highlights the ability to create custom UI components and the free tier for up to 250 monthly tracked users.
```text
Flows are designed to be a “Headless product adoption platform“. This means that you can create your own UI components with custom styling and logic to create a native experience for your users. You can also use our built-in components to get started quickly.
How much does Flows cost?
Flows is free for up to 250 monthly tracked users (MTUs). After that, the pricing starts at $0.1 per MTU. Our pricing is volume based, so the more active users you have, the less you pay per user. For more information, check out our pricing page.
```
--------------------------------
### Serialized React/JSX UI Components
Source: https://flows.sh/solutions/revenue-expansion
This code snippet represents a serialized structure of React/JSX components, likely used for server-side rendering or hydration in a Next.js application. It defines various UI elements such as divs, paragraphs, and SVG icons with their respective classes and children, forming a layout for a 'Getting started' section and a 'Designed for unlimited customizability' section.
```JavaScript
[
[
"$",
"div",
null,
{
"className": "w_100% px_space24 pos_relative",
"children": [
[
"$",
"div",
null,
{
"ref": "$undefined",
"className": "max-w_1088px mx_auto mt_space80 mb_space40 md:mt_space160 md:mb_space64",
"children": [
[
"$",
"div",
null,
{
"ref": "$undefined",
"className": "w_100%",
"children": [
[
"$",
"h2",
null,
{
"ref": "$undefined",
"className": "textStyle_title3xl ta_center c_newFg.neutral",
"children": "Designed for unlimited customizability"
}
],
[
"$",
"p",
null,
{
"ref": "$undefined",
"className": "max-w_680 mx_auto mt_space16 tw_balance textStyle_bodyL ta_center c_newFg.neutral.muted",
"children": "Flows is designed to be a “Headless product adoption platform”. We’ll focus on user state problems, so you can focus on your own product."
}
]
]
}
],
null
]
}
],
"$undefined"
]
}
],
[
"$",
"div",
null,
{
"className": "w_100% px_space24 pos_relative",
"children": [
[
"$",
"div",
null,
{
"ref": "$undefined",
"className": "max-w_1088px mx_auto",
"children": [
[
"$",
"div",
null,
{
"ref": "$undefined",
"className": "jc_space-between d_flex pos_relative",
"children": [
[
"$",
"$L4e",
null,
{
"side": "top"
}
],
[
"$",
"$L4e",
null,
{
"side": "top"
}
]
]
}
],
[
"$",
"div",
null,
{
"ref": "$undefined",
"className": "d_flex pos_relative",
"children": [
[
"$",
"$L4e",
null,
{
"side": "left"
}
],
[
"$",
"$L4f",
null,
{}
],
[
"$",
"$L50",
null,
{}
],
[
"$",
"$L4f",
null,
{}
],
[
"$",
"$L4e",
null,
{
"side": "right"
}
]
]
}
],
[
"$",
"div",
null,
{
"ref": "$undefined",
"className": "d_grid grid-tc_repeat(2,_1fr) md:grid-tc_repeat(4,_auto) gap_0 mx_auto jc_center ai"
}
]
]
}
]
]
}
]
]
```
--------------------------------
### UI Structure for Start Button
Source: https://flows.sh/solutions/product-led-growth
Defines the structure for a UI element representing a 'Start' button, including its visual styling and nested SVG icon.
```json
{
"className": "d_flex flex-d_column ai_center",
"children": [
"$",
"div",
null,
{
"ref": "$undefined",
"className": "d_flex ai_flex-start",
"children": [
[
"$",
"div",
null,
{
"ref": "$undefined",
"className": "d_flex flex-d_column ai_center",
"children": [
[
"$",
"div",
null,
{
"ref": "$undefined",
"className": "d_flex ai_center bg-c_newBg.neutral bx-sh_newL1 bdr_radius8 py_10px pr_12px pl_10px gap_space8 bd-w_1px bd-c_newBorder.neutral",
"children": [
[
"$",
"div",
null,
{
"ref": "$undefined",
"className": "p_space2 bdr_radius4 bg-c_blockIcon.start.bg c_blockIcon.start.fg",
"children": [
"$",
"svg",
null,
{
"fill": "currentColor",
"height": 16,
"width": 16,
"xmlns": "http://www.w3.org/2000/svg",
"className": "c_inherit flex-sh_0",
"ref": "$undefined",
"children": [
"$",
"path",
null,
{
"d": "$44"
}
]
}
]
}
],
[
"$",
"p",
null,
{
"ref": "$undefined",
"className": "textStyle_bodyS ta_left fw_600 c_newFg.neutral",
"children": "Start"
}
]
]
}
],
[
"$",
"svg",
null,
{
"viewBox": "0 0 16 20",
"width": "16",
"height": "20",
"children": [
[
"$",
"defs",
null,
{
"children": [
[
"$",
"marker",
null,
{
"id": "arrow",
"viewBox": "0 0 6 10",
"refX": "6",
"refY": "5",
"markerUnits": "strokeWidth",
"markerWidth": "6",
"markerHeight": "10",
"orient": "auto",
"children": [
[
"$",
"path",
null,
{
"d": "M0,0 L0,10 L6,5 z",
"fill": "var(--colors-new-border-neutral-strong)"
}
]
]
}
],
[
"$",
"marker",
null,
{
"id": "circle",
"viewBox": "0 0 10 10",
"refX": "5",
"refY": "5",
"markerUnits": "strokeWidth",
"markerWidth": "10",
"markerHeight": "10",
"orient": "auto",
"children": "$L45"
}
]
]
}
],
"$L46"
]
}
],
"$L47",
"$L48",
"$L49",
"$L4a",
"$L4b"
]
}
],
"$L4c"
]
}
]
}
```
--------------------------------
### JavaScript Overview Documentation Link
Source: https://flows.sh/docs/javascript/overview
A link to the JavaScript overview documentation for the flows.sh project hosted on GitHub. This serves as an entry point for developers looking to understand the JavaScript implementation.
```html
JavaScript Overview
```
--------------------------------
### Next.js Internal Structure Example
Source: https://flows.sh/docs/react/overview
An example of internal data structure used by Next.js for page routing and component rendering, including module imports and component properties.
```javascript
self.__next_f.push([
1,
"14:[\"$\",\"$L2b\",null,{\"toc\":[{\"depth\":2,\"url\":\"#overview\",\"title\":\"Overview\"},{\"depth\":2,\"url\":\"#templates\",\"title\":\"Templates\"}],\"single\":\"$undefined\",\"children\":[[ \"$\",\"$L2c\",null,{\"className\":\"\",\"style\":{\"--fd-tocnav-height\":\"$undefined\"},\"children\":[[ \"$\",\"$L2d\",null,{\"className\":\"h-10\",\"children\":[[ \"$\",\"$L2e\",null,{\"className\":\"w-full\",\"items\":\"$14:props:toc\"}],\[ \"$\",\"$L2f\",null,{\"children\":[\"$undefined\",\[ \"$\",\"$L30\",null,{\"isMenu\":true,\"children\":[[ \"$\",\"$L31\",null,{\"items\":\"$14:props:toc\"}]])},\"$undefined\" ]]}]]},{ \"$\",\"$L32\",null,{\"className\":\"max-w-[860px]\",\"children\":[[ \"$\",\"$L33\",null,{}],[[ \"$\",\"h1\",null,{\"ref\":\"$undefined\",\"children\":\"Overview\",\"className\":\"text-3xl font-semibold\"}],\[ \"$\",\"p\",null,{\"ref\":\"$undefined\",\"children\":\"Flows React SDK.\",\"className\":\"mb-8 text-lg text-fd-muted-foreground\"}],\[ \"$\",\"div\",null,{\"ref\":\"$undefined\",\"children\":[[ \"$\",\"p\",null,{\"children\":[\"$\",\"$L34\",null,{\"className\":\"bdr_radius6 bd-w_1px! bd-c_newBorder.neutral!\",\"alt\":\"Flows React SDK\",\"placeholder\":\"blur\",\"src\":{\"src\":\"/docs/_next/static/media/react.252c599c.png\",\"height\":960,\"width\":1800,\"blurDataURL\":\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAMAAACEE47CAAAAPFBMVEUjNHQ8bsZkascuOVhKUrU5Wr1SoNkuO3koSZ86RZVVWLxDTJ1Hh9E5acJCfcpft+A9QW9NbMgwPmssULAsUhlTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAKUlEQVR4nAXBhQEAIAwDsDIfLv//SgK4A6ED2ZI5SodU2fdNwyGqWmx9D4wA9hZgTWoAAAAASUVORK5CYII=\",\"blurWidth\":8,\"blurHeight\":4}}]},\"\\n\",\[ \"$\",\"h2\",null,{\"className\":\"flex scroll-m-28 flex-row items-center gap-2 textStyle_titleXl! mt_space64! mb_space16!\",\"id\":\"overview\",\"children\":[[ \"$\",\"a\",null,{\"data-card\":\"\",\"href\":\"#overview\",\"className\":\"peer\",\"children\":\"Overview\"}],\[ \"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide size-3.5 shrink-0 text-fd-muted-foreground opacity-0 transition-opacity peer-hover:opacity-100\",\"aria-label\":\"Link to section\",\"children\":[[[ \"$\",\"path\",\"1cjeqo\",{\"d\":\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"}],\[ \"$\",\"path\",\"19qd67\",{\"d\":\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"}]],\"$undefined\" ]]}]],\"\\n\",\[ \"$\",\"p\",null,{\"children\":\"Flows React SDK is a lightweight library that allows you to integrate Flows into any application built with React. The SDK also comes with a components package to simplify getting started with Flows in your application.\"}],\"\\n\",\[ \"$\",\"div\",null,{\"children\":[[ \"$\",\"$Le\",null,{\"href\":\"./installation\",\"children\":[[ \"$\",\"div\",null,{\"className\":\"not-prose mb-2 w-fit rounded-md border bg-fd-muted p-1.5 text-fd-muted-foreground [\u0026_svg]:size-4\",\"children\":["$","svg",null,{\"fill\":\"currentColor\",\"height\":16,\"width\":16,\"xmlns\":\"http://www.w3.org/2000/svg\",\"children\":["$","path",null,{\"d\":\"M7.693 1.066a.747.747 0 0 1 .614 0l7.25 3.25a.75.75 0 0 1 0 1.368L13 6.831v2.794c0 1.024-.81 1.749-1.66 2.173-.893.447-2.075.702-3.34.702-.278 0-.55-.012-.816-.036a.75.75 0 0 1 .133-1.494c.22.02.45.03.683.03 1.082 0 2.025-.221 2.67-.543.69-.345.83-.682.83-.832V7.503L8.307 8.934a.747.747 0 0 1-.614 0L4 7.28v1.663c.296.105.575.275.812.512.438.438.688 1.059.688 1.796v3a.75.75 0 0 1-.75.75h-3a.75.75 0 0 1-.75-.75v-3c0-.737.25-1.358.688-1.796.237-.237.516-.407.812-.512V6\"}]])}]}]}]}]])
```
--------------------------------
### Hint Component
Source: https://flows.sh/examples
Details for the 'Hint' UI component, designed for self-guided contextual hints to aid feature discovery and education. Includes descriptive text and links to light/dark mode image assets.
```javascript
self.__next_f.push([
1,
"21:[\"$\",\"$L15\",\"Hint\",{\"href\":\"/examples/hint\",\"className\":\"bx-sh_antimetal bdr_radius12 bd-w_1px bd-c_newBorder.neutral.placeholder bg-c_pane.bg.elevated fast-ease-in-out_all ov_hidden hover:bd-c_newBorder.neutral.strong\",\"children\":[[ \"$\", \"div\", null, { \"ref\": \"$undefined\", \"className\": \"d_flex flex-d_column p_space16 gap_space4\", \"children\": [[ \"$\", \"h2\", null, { \"ref\": \"$undefined\", \"className\": \"lh_20px textStyle_titleM ta_left c_newFg.neutral\", \"children\": \"Hint\" } ], [ \"$\", \"p\", null, { \"ref\": \"$undefined\", \"className\": \"tw_balance textStyle_bodyXs ta_left c_newFg.neutral.muted\", \"children\": \"Self-guided contextual hints that help with feature discovery and education.\" } ]] } ], [ \"$\", \"div\", null, { \"ref\": \"$undefined\", \"className\": \"d_flex ov_hidden px_space16 pb_space16\", \"children\": [ \"$\", \"div\", null, { \"ref\": \"$undefined\", \"className\": \"d_flex ov_hidden bd-w_1px bd-c_newBorder.neutral bdr_radius6\", \"children\": [[ \"$\", \"$L1b\", null, { \"width\": 600, \"height\": 384, \"alt\": \"Hint\", \"className\": \"dark:d_none\", \"src\": { \"src\": \"/_next/static/media/hint-light.29e70852.png\", \"height\": 768, \"width\": 1200, \"blurDataURL\": \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAABlBMVEX5+vzi7PsrDINHAAAACXBIWXMAAEJwAABCcAFu8l9tAAAAEUlEQVR4nGNgQAKMjMg8TAAAAGwAA2sQJV0AAAAASUVORK5CYII=\", \"blurWidth\": 8, \"blurHeight\": 5 } } ], [ \"$\", \"$L1b\", null, { \"width\": 600, \"height\": 384, \"alt\": \"Hint\", \"className\": \"d_none dark:d_unset\", \"src\": { \"src\": \"/_next/static/media/hint-dark.6037d229.png\", \"height\": 768, \"width\": 1200, \"blurDataURL\": \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAMAAABPT11nAAAACVBMVEUdISc6QEkrNEF0zWn5AAAACXBIWXMAAEJwAABCcAFu8l9tAAAAGElEQVR4nGNgQAJMTBCakZGREcaACoEBAAFHAA6+HAVVAAAAAElFTkSuQmCC\", \"blurWidth\": 8, \"blurHeight\": 5 } } ]] } ]] } ]]
)
```
--------------------------------
### Flexible Solution Section UI Component
Source: https://flows.sh/solutions/user-onboarding
Displays a section titled 'Flexible solution' with descriptive text. This component is designed to showcase the project's adaptability and built-in UI components. It uses utility classes for layout and typography.
```html
Flexible solution
Flows comes with a set of built-in UI components to get you started. Not enough?
$L38
$L39
$L3a
```
--------------------------------
### Next.js Page Rendering Data
Source: https://flows.sh/examples
This snippet contains detailed data for rendering a specific page, likely the 'examples' page. It includes structural information, component references, and asset links such as CSS and fonts, formatted for client-side hydration.
```javascript
self.__next_f.push([1,"0:{\"P\":null,\"b\":\"9sOi4KXtQdKI2pNyPyMrj\",\"p\":\"\",\"c\":[\"\",\"examples\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"examples\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/1df11834b5c85839.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],\"$\",\"html\",null,{\"className\":\"__variable_2ca027 __variable_a76874\",\"lang\":\"en\",\"suppressHydrationWarning\":true,\"children\":[[[\"$\",\"body\",null,{\"className\":\"bg_pane.bg.secondary ov-x_hidden\",\"children\":[[[\"$\",\"$L2\",null,{\"children\":[[[\"$\",\"$L3\",null,{}],[\"$\",\"main\",null,{\"className\":\"ov-x_hidden\",\"children\":[[[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[[[\"$\",\"$L5\",null,{}]]],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"}}]]]}]]]}]]]}]]]}]]]}])
```
--------------------------------
### Comparison Section Link
Source: https://flows.sh/examples
A link to a blog post or page detailing comparisons between Flows and other tools. This is part of the website's content structure.
```html