Understanding Snippets
The Snippet Builder Interface
Learn about the primary workspace within Crust AI for creating, configuring, and customizing your snippets.
Your Creative Workspace
The Snippet Builder is your primary workspace within Crust AI for creating, configuring, and customizing your snippets. It provides a visual environment where you can see how your data is being transformed into a mini-application in real-time.
The Snippet Builder is your primary workspace within Crust AI for creating, configuring, and customizing your snippets. It provides a visual environment where you can see how your data is being transformed into a mini-application in real-time.
The builder interface is organized around a simple, step-by-step process, represented by numbered sections:
- Select Snippet Type: Choose the fundamental structure of your snippet (Single Item or Multiple Items).
- Select Data / Set Filters & Permissions: Define which data from your selected table will be visible in the snippet and who is allowed to see it.
- Modify and Tweak the UI (“Make It Perfect with AI”): Customize the UI, visual design, layout, and add interactive elements.
- Share (“Looking good?”): Get your shareable URL and distribute your snippet.
1
Select Snippet Type
This is the very first step when creating a new snippet. As covered in the Understanding Snippet Types page, you choose between Single Item or Multiple Items.
This choice impacts how Step 2 is presented and whether you have access to both List View and Detail View in Step 3.For a deeper dive into the differences between these types, see: Understanding Snippet Types.
- Single Item: For displaying detailed information of one specific record.
- Multiple Items: For displaying a list of filtered records.
This choice impacts how Step 2 is presented and whether you have access to both List View and Detail View in Step 3.For a deeper dive into the differences between these types, see: Understanding Snippet Types.2
Select Data / Set Filters & Permissions
This section is where you see your selected table and determine the data that will populate the snippet. The appearance of this section changes slightly based on whether you chose “Single Item” or “Multiple Items” in Step 1.On the left side, you’ll see a preview of your data directly from the connected table.
Learn how to configure filters and sorting: Setting Filters & Sorting for Multiple Items SnippetsLearn how to set up granular, user-based permissions: User-Based Permission Explained
If you selected Single Item: The table preview will show all records, and you’ll select a specific record using a radio button next to it. The preview on the right will immediately show the Detail View for that chosen record. This selected record will also affect the Shareable URL.
Multi-Items Data Access Configurations
For multi-items snippets only, the controls in this section allow you to specify which data (based on criteria or user identity) will be pulled from the table. It includes:- Filter: Apply static filters to include only records that meet specific conditions (e.g., only show records where “Status is ‘Active’”). These filters apply to anyone viewing the snippet.
- Sort: Define the order in which records appear in the List View of a Multiple Items snippet.
- Permission: Control who can see the data. This is crucial for implementing user-based filtering.
Learn how to configure filters and sorting: Setting Filters & Sorting for Multiple Items SnippetsLearn how to set up granular, user-based permissions: User-Based Permission Explained3
Modify and Tweak the UI ("Make It Perfect with AI")
This step is dedicated to refining the visual appearance (UI/UX) of your snippet and adding interactive elements.The right side prominently features a real-time preview of your snippet, rendered within a phone mockup. This preview updates live as you make design changes.
View ToggleAbove the preview, you’ll see buttons to switch between List View and Detail View.
AI Prompt InputBelow the preview, you’ll find a text box labeled “What would you like to modify?”. This is the primary way you use Crust AI’s generative capabilities. You can type natural language requests here to:
Layout Direction: You can change the text and layout direction (Left-to-Right or Right-to-Left) to support languages like Hebrew or Arabic, ensuring your snippet is culturally and linguistically appropriate for your audience.
Edit Code: For advanced technical users, there’s an option to “Edit Code Manually”. This allows you to directly access and modify the underlying React code of the snippet. Caution: This feature is for experienced developers only. Incorrect code changes can easily break your snippet. We recommend using the AI prompt and no-code options for most customizations.
View ToggleAbove the preview, you’ll see buttons to switch between List View and Detail View.- For Single Item snippets, only the Detail View is available, as the snippet only displays one record’s full details.
- For Multiple Items snippets, both List View (showing the list of records) and Detail View (showing the details of a selected record) are available. You can toggle between them here to preview both interfaces. Clicking on an item in the ‘List View’ will automatically navigate to the ‘Detail View’ presenting the selected item.
AI Prompt InputBelow the preview, you’ll find a text box labeled “What would you like to modify?”. This is the primary way you use Crust AI’s generative capabilities. You can type natural language requests here to:- Change the design, layout, colors, and other visual styles (e.g., “Make the title font larger”, “Present the status as a chip”, “Change the header color to red”).
- Adjust the layout and arrangement of elements (e.g., “Move the budget above the dates”).
- Add interactive elements like buttons or checkboxes (“Allow the user to edit the status using a dropdown”)
- Control record fields visibility (“Hide the ‘Admin Notes’ field”)
Important Note about the AI Prompt
The prompt is designed for modifying the snippet’s appearance and adding interactive elements that operate on the already selected/filtered data. It cannot:
The prompt is designed for modifying the snippet’s appearance and adding interactive elements that operate on the already selected/filtered data. It cannot:
- Change the snippet type (Single vs. Multiple).
- Select which records are included.
- Set filters, sorting, or permissions.
- Modify to edit the data source table schema (adding fields, changing field types, etc).
Additional Controls
Full Screen Preview: Use the full screen button to view the snippet preview in a larger format and see how it renders on a desktop screen as well as mobile.Layout Direction: You can change the text and layout direction (Left-to-Right or Right-to-Left) to support languages like Hebrew or Arabic, ensuring your snippet is culturally and linguistically appropriate for your audience.Edit Code: For advanced technical users, there’s an option to “Edit Code Manually”. This allows you to directly access and modify the underlying React code of the snippet. Caution: This feature is for experienced developers only. Incorrect code changes can easily break your snippet. We recommend using the AI prompt and no-code options for most customizations.4
Share ("Looking good?")
Once you’re satisfied with your snippet’s data and design, this final section allows you to get the URL and share it.
Click the
Click the Get Shareable URL button. Depending on your snippet’s type and permission settings, you’ll get different URL options. To learn more about how this works, see: Understanding the Shareable URL StructureYou can share these URLs directly or integrate them into Airtable/Notion/Monday.com buttons, automations (Make/Zapier), or other tools.Learn more about integrating snippets into workflows: Share a Snippet Directly from Airtable and Integrate a Snippet in a Make/Zapier FlowRenaming a Snippet
You can rename the snippet by clicking the snippet name and typing the new name.