Preview and edit an app

After you deploy, you iterate on the Agentic Development Toolkit (ADT) project's source code, not inside the Web Viewer HTML stored in FileMaker.

Where your code lives

  • Your app folder (on disk, usually in Git) is the source of truth. React components, TypeScript files, Tailwind styles, and build configuration live in webviewer-apps/<app>/ inside your project. Your coding agent and editor work against this folder. See Project Folders and Generated Files for the full structure and which commands run where.

  • Inside FileMaker you have a built bundle: the single-file HTML placed there by Deploy to FileMaker. That artifact runs in the Web Viewer. It is build output, not a place to hand-edit layouts or scripts.

If you're used to building everything directly in FileMaker, it helps to separate these two mentally: FileMaker hosts the runtime bundle; your machine hosts the editable app.

The change loop

  1. Open the project in your coding agent, and work in the app directory — webviewer-apps/<app>/, created by adt app add.

  2. Ask for changes — new screens, UX tweaks, data wiring, styling. Use the local preview (pnpm dev from the app directory, viewed in a browser through fmBridge()) so you see updates before touching FileMaker, as described in Build a Web Viewer App.

  3. When you're satisfied, ask the agent to Deploy to FileMaker so the file receives the finished build. See Deploy to FileMaker.

Changing FileMaker layouts, scripts, or fields may require regenerating types. See Generate types with Typegen for when and how to do this.

After you update ADT itself, ask your agent to update the vendored JavaScript library when needed. See Update the Toolkit.

See Agent Workflow for how agents iterate with checks and verification.

Next step

Continue with GitHub Workflow for how your project folder fits into version control.