Getting Started

Creating a ProofKit project for a FileMaker WebViewer is extremely similar to the browser-based version as covered in the main Getting Started guide. This document highlights the WebViewer-specific workflow.

Prep your FileMaker file

• Install the ProofKit WebViewer add-on into the file you want to target. If you already have a ProofKit project, run proofkit add addon webviewer to copy the local add-on files, then install the add-on into the FileMaker file.
• Make sure the file has the scripts needed by your WebViewer workflow, such as Launch Web Viewer for Dev and UploadWebviewerWidget.
• If you want local typegen without a hosted server, start the FM MCP bridge and keep a connected FileMaker file open.

Creating a ProofKit Project

Run the following command to scaffold a new ProofKit project, choosing the webviewer option when prompted:

pnpm create proofkit@beta

npx create-proofkit@beta

yarn create proofkit@beta

Refer to the main Getting Started guide for more details on the prompts and options available.

The scaffolded app already includes Tailwind v4, shadcn config, helper scripts, and a starter proofkit-typegen.config.jsonc file wired for FM MCP.

Generate layout clients later

When you are ready to add generated FileMaker clients:

• Edit proofkit-typegen.config.jsonc and add the layouts you want.
• Run pnpm typegen or pnpm typegen:ui.
• If FM MCP is running with a connected file, ProofKit can use that local path instead of a hosted server.

Developing with the WebViewer

When you run the dev server with the dev command, a localhost URL will be displayed. Unlike older templates, the starter app is browser-safe and can render there normally. You still need FileMaker to test script execution and real WebViewer behavior.

In modern FileMaker versions, the WebViewer is just as capable as any other browser, but if your users are going to exclusively be running this code in a WebViewer, you should also be developing with the the WebViewer as your browser. Plus, it's the only way to test the FileMaker interactions that you will likely build.

With your dev server running (e.g. pnpm dev), open a seperate terminal instance and run:

npm run launch-fm

pnpm launch-fm

yarn launch-fm

bun launch-fm

This command prefers a locally connected FM MCP file first, then falls back to FM_SERVER and FM_DATABASE from .env. It opens FileMaker Pro and runs the Launch Web Viewer for Dev script so your WebViewer points at the local dev server.

You can use the other utility scripts to build your own version of this behavior:

• Enable WebDev Mode: Sets a global variable to indicate that the WebViewer should be running in dev mode, then resets the WebViewer to re-apply it's calculation.
• Disable WebDev Mode: Clears the global variable for the WebViewer to return to production mode, then resets the WebViewer to re-apply it's calculation.

To enable the JavaScript debugging in FileMaker Web Viewers, run this command in your terminal, then restart FileMaker Pro:

defaults write com.filemaker.client.pro12 WebKitDebugDeveloperExtrasEnabled -bool YES

Building for Production

When you're done with development, you need to build your project for production and then upload the resulting code to your FileMaker file. Use these commands in your project's root directory:

npm run build,upload,build:upload

pnpm build,upload,build:upload

yarn build,upload,build:upload

bun build,upload,build:upload

The final command is simply a shortcut for running the build and upload commands in sequence.

The build command will compile your project into a single html file, which will be output to the dist directory.

The upload command uses the fmp URL protocol to call a script in your FileMaker file with the path to the built html file. Like launch-fm, it prefers a locally connected FM MCP file before falling back to hosted server env vars.