Write real code

Open Code

Every project has source files from the start. The Code workspace shows them in an explorer, with tabs, search, completions and diagnostics, and keeps a preview of the running app beside them. The entry file renders your visual app:

import { VisualApp } from "@appsanic/app";

export default function App() {
  return <VisualApp />;
}

Connect code to your screens

Generated, read-only interfaces describe your app. @appsanic/app provides VisualApp, useApp and the binding types; @appsanic/design provides references to your pages and components, your theme and your assets.

Pass bindings to VisualApp to set a component's properties, visibility or event handlers while the app runs. Bindings overlay the design while it runs; they never rewrite the values saved in the Inspector.

import { useState } from "react";
import { VisualApp, type Bindings } from "@appsanic/app";
import { nodes } from "@appsanic/design";

export default function App() {
  const [count, setCount] = useState(0);
  const bindings: Bindings = {
    [nodes.incrementButton]: {
      onPress: () => setCount((value) => value + 1),
    },
    [nodes.counterText]: {
      props: { content: `Count: ${count}` },
    },
  };
  return <VisualApp bindings={bindings} />;
}

nodes.incrementButton and nodes.counterText stand for references in your own generated guide; copy the real ones from there.

Use the feedback loop

Changes apply and compile after a short pause in typing; Ctrl+S applies them at once. Problems shows compile feedback, Console shows what the app prints, and both link to the file and line where source maps allow.

A failed compile keeps the last working preview visible and says it is older than your source. A successful one restarts the app from the top.

Custom components in code

Write a component in its own file and register it as a custom component. It then appears in the library and on the canvas beside the built-in components, with the properties you chose to expose. Registration, not a folder or a file name, is what makes a file a component.

Write for the phone

Use React Native primitives for anything that should run on a device. Browser elements, browser globals and browser-only libraries do not become native just because the web preview compiles; Code reports native compatibility problems separately.

Prepare supported packages from Code's Libraries view. Your source is compiled and runs inside the isolated preview or a native app, never inside the editor. Keep private keys and privileged operations on your own backend.