| name | fliplet-helpers-framework |
| description | Build helpers — reusable Vue-based interface components with editable interface fields, hooks, methods, libraries, and templates. |
Fliplet helpers framework
Build helpers — reusable Vue-based interface components with editable interface fields, hooks, methods, libraries, and templates.
Documentation
- Distributing Helpers as components: Package a Fliplet Helper as a reusable widget-framework component so it can be installed and dropped into apps like any first-party component.
- Dynamic components: Render Helper instances inside Dynamic Container and List Repeater components, with reactive per-record data binding via
supportsDynamicContext.
- Helper example: decision tree: Worked example: build a decision-tree Helper that presents a question, waits for the user's answer, then advances to the next question.
- Helper example: question and answer: A worked example showing how to build a Helper that presents a multiple-choice question and reveals whether the selected answer is correct.
- Helper fields (attributes): Pass attributes to a Helper via the HTML
field element and read them inside the Helper via this.fields.<name>.
- Helper lifecycle hooks and events: Run code at key points in a Helper's lifecycle using the
beforeReady and ready render hooks.
- Helper configuration interface: fields: Define the fields shown in a Helper's Fliplet Studio configuration interface, including their type, label, validation, and default value.
- Helper configuration interface: hooks and events: Run code when a Helper's configuration interface initializes, becomes ready, or is about to save.
- Helper configuration interface: external libraries: Include Fliplet-approved or third-party JavaScript and CSS libraries in a Helper's configuration interface via the
dependencies array.
- Helper configuration interface: methods: Use
find, findOne, and children inside a Helper's configuration interface to access nested child Helper instances.
- Helper configuration interface: Define a configuration UI for your Helper so users can set field values for each instance from within Fliplet Studio.
- Helper external libraries: Declare a Helper's runtime dependencies by listing Fliplet-approved or third-party JS/CSS libraries in its
render.dependencies array.
- Helper instance and class methods: Define instance methods on a Helper and call Helper class methods such as
find and findOne anywhere in the app lifecycle.
- Fliplet Helpers overview: Helpers are a UI framework for building custom components in Fliplet apps using JavaScript, with a configuration interface in Fliplet Studio.
- Fliplet Helpers quickstart: Create your first Fliplet Helper by defining its name, template, and configuration object in screen or global JavaScript.
- Fliplet.Helper() constructor reference: Reference for
Fliplet.Helper(): the constructor used to define a new Helper in a screen or globally across an app.
- Fliplet.Helper.field() reference: Reference for
Fliplet.Helper.field(): call this from a Helper's configuration interface to read or write the value of another field.
- Fliplet.Helper query methods reference: Reference for
Fliplet.Helper query methods used to find Helper instances on the current screen from app code or from a configuration interface.
- Styling Helpers: Style a Helper using standard
class and style HTML attributes — they are passed through to the rendered element rather than treated as Helper fields.
- Helper templates: Every Helper defines an HTML template that renders it on screen, with support for variable binding, conditional blocks, and loops.
- Helper rich-content views: Define named rich-content views inside a Helper so app builders can drop approved child Helpers into specific regions of its layout.
How to load full content
The URLs above are raw .md and can be fetched directly. To search across all Fliplet developer docs, use the MCP server at https://developers.fliplet.com/mcp (tools: search_fliplet_docs, fetch_fliplet_doc), or fetch https://developers.fliplet.com/.well-known/llms-full.txt for the entire site as a single stream.
