Adding Logic and State

If you’ve built apps in Draftbit Classic, you’re probably looking for the Variables modal, the Action Editor, or Custom Functions. The current Builder doesn’t have those panels. Your app is a regular Expo React Native app, so its variables, state, and functions live in its code, and you add them by asking the AI agent or by editing that code.

You don’t have to write whole files to do it. The Builder gives you a few places to work with logic directly:

• The Events section of the Properties tab, for handlers like onPress.
• Insert variable, to show a value in text.
• The Code tab, for the selected component’s code.
• The Code Editor, for everything else.

Where Classic concepts live now

In Draftbit Classic	In your app now	How to add it
Screen Variables	State inside the screen, usually React’s useState	Ask the agent, or use the Code Editor
App Variables	State shared across screens, such as a React context	Ask the agent
Device Variables	Values saved on the device so they survive a restart	Ask the agent
System Variables (Is iOS, Device Width, …)	React Native values such as Platform.OS and useWindowDimensions()	Ask the agent, or use the Code Editor
Triggers (On Press, On Change Text, …)	Event props such as onPress and onChangeText	Properties tab, Events section
Actions and the Action Editor	Code inside the event handler: navigate, update state, call an API	Ask the agent, or the Properties tab for short handlers
Custom Functions	Functions in the screen file or a shared file	Ask the agent, or use the Code Editor
Transforms	JavaScript expressions, such as price.toFixed(2)	Properties tab Code input, or the Code tab
Global variables in an app you imported from Classic	Still in your app, in its legacy global variables file	Build Config → Variables

Ask the agent

The quickest way to add state or logic is to describe what should happen. The agent writes the state, handlers, and functions, and it reuses the patterns your app already has instead of adding a second way to do the same thing.

Name the screen and the component, say what the user does, and say what should happen next. To point at a specific component, use Add component in the Agent tab and select it on the canvas. For example:

“On the Profile screen, when someone taps the Save button, save the name and email fields to the user’s profile, show a ‘Saved’ message, and go back to the previous screen.”

“Add a counter to the Home screen. The plus button adds one, the minus button subtracts one, and it can’t go below zero.”

“Remember whether the user finished onboarding, even after they close the app. Skip the onboarding screens if they have.”

“Add a helper that formats prices as dollars with two decimals, and use it on the Product and Cart screens.”

For more on writing prompts like these, see Composing Task Prompts.

Add an event handler in the Properties tab

Event handlers are what Classic called Triggers and Actions. In the Properties tab, every prop that starts with on, such as onPress, onLongPress, or onChangeText, is listed in the Events section.

1. Select the component

   Select it in the Component Tree or on the preview canvas, for example a button.

2. Open the Properties tab

   It’s next to Styles in the Utility Panel.

3. Expand Events

   The section lists the event props the component accepts. Use the search field at the top of the tab to find one by name.

4. Enter the handler

   Click the prop’s value (it shows “Not set” when it’s empty) to open the code input, and type a JavaScript expression. Event props take a function, so the value is usually an arrow function, such as () => setCount(count + 1).

   Press Esc or select Done to close the input. Your change is written to the screen’s file.

5. Try it in the preview

   Switch the preview from Design to Preview (⌘I, or Ctrl+I on Windows) and use the component. When it works, save your changes.

The expression can only use names that already exist in the file. In the example above, count and setCount must already be declared on the screen. If they aren’t, ask the agent to add them, or add them in the Code Editor. The same goes for imports: to call something like router.push("/settings"), the file has to import router.

Every other prop can take code too. Use the button at the end of a prop’s row to switch it to the Code input, then enter an expression such as !email for a button’s disabled prop. To remove a handler, click the prop’s name and remove it, or ⌘-click (Ctrl-click on Windows) the highlighted name.

Show a value in text

To show a prop, state, or other value in a piece of text, use Insert variable:

1. Select the text component

   Select it in the Component Tree or the preview, then open the Styles tab. Its fields are in the Content section at the top.

2. Open the picker

   Select Insert variable (the { } button) next to the Text field, or type { where the value should go.

3. Pick a value

   The picker lists the values that are in scope for that component, grouped by where they come from: Props, List item, State, the hook they come from (such as From useUser()), In this file, and Imported. Objects show the fields your code already reads, such as user.firstName. Search to narrow the list, then select a value.

The text then mixes words and values, like {count} tasks left, and you can keep editing the words around each value. See Styles for how these fields work.

The picker only lists values that exist in the file. If it says “No values in scope here”, or the value you want isn’t listed, add the state or prop first, then come back.

Edit the selected component in the Code tab

The Code tab shows the code for the selected component only: its JSX, including any handlers written inline on it. It’s a good place for small changes, such as adding an onPress that does two things, changing a component’s children, or changing the expression a prop uses.

1. Select a component, then open the Code tab in the Utility Panel. The component’s name and file path are at the top.

2. Edit the code.

3. Select Save to write it to the file, or Reset to go back to what you started with.

The Code tab doesn’t show the rest of the file. State declarations like useState, imports, and functions defined above the component’s markup are outside it, so add those with the agent or in the Code Editor.

Edit whole files in the Code Editor

The Code Editor opens your app’s full files. Use it to declare state, add imports, write functions, or create a shared file of helpers that several screens use.

Plan availability

The Code Editor requires the Standard plan or above. On the Free plan, it opens blurred with an upgrade prompt. The Properties tab, Insert variable, and the agent work on every plan.

Global variables in apps imported from Classic

When you import an app from Draftbit Classic, its App Variables and Device Variables come with it. They keep working through the app’s existing global variables file, and the agent uses that same system when it adds app-wide state to these apps.

To change their values, open Build Config and select the Variables tab. This tab only appears for apps imported from Classic. It has an App Variables tab and a Device Variables tab, and each variable can have a different value for Development, Staging, and Production. Enter a name and select Add variable to add one, then select the save button at the top of the tab.

Editing a Device Variable changes its default value. Devices that already stored a value keep using it until the user clears the app’s data.

To use one of these variables in new logic, mention it by name when you ask the agent, for example: “Use the auth_token device variable when calling the orders API.”

Limits

• There’s no visual action or workflow editor. Logic is code in your app, written by the agent or by you.
• The Properties tab lists the props a component’s TypeScript types describe. If a component’s types don’t list a prop, set it in the Code tab or ask the agent.
• Insert variable and the Properties tab’s code input can only use values that already exist in the file. Adding new state or imports needs the agent or the Code Editor.
• The Code tab edits one component’s code at a time, not the whole file.