A drop-in dev tools panel for Lowdefy apps. It adds a floating Dev Tools button (FloatButton, bottom corner) that opens a drawer with six tabs:

• State — browse live State, Global and User values in a tree (with a search filter), then view and edit the selected value in a Monaco code editor (YAML, syntax highlighting, Cmd/Ctrl+F search, code folding). Edits to State/Global are applied back with Apply; Copy puts the value on the clipboard. Also export/import full state snapshots.
• Requests — pick any page request to inspect its Details, Payload and Response in the editor, with a live status line (Loading / Success / Error + response time). Step through the call history (◀ ▶) and diff a call against the previous one. Refetch re-runs it; Copy copies what's shown.
• Route — inspect the live location (_location) and parsed URL query (_url_query), then edit the target page / query / hash and Navigate to test routing.
• Run — fire any page request by id, or set an arbitrary key on live State or Global from a YAML value.
• Events — a read-only log of the app's recent events (_event_log), sanitized and capped.
• Eval — a JS REPL that runs against live state / global / user.

The Monaco editors follow the host app's light/dark theme (via _media: darkMode). The drawer (and its floating button) can be flipped to either side, and resized, from the panel header; placement and width persist across reloads. Toggle the panel with Cmd/Ctrl + Shift + D.

Requires a Lowdefy version with the module system and the app-level overlay config (the mechanisms used to install the tools and render them on every page).

The dev tools are a Lowdefy module (modules/dev-tools/) that depends on the @lowdefy/plugin-dev-tools plugin (Monaco CodeEditor + KeyboardShortcut blocks and the LocalStorage* / EvalJs / SetUrlHash actions), which lives in this repo under plugins/plugin-dev-tools. Add the plugin to your app's lowdefy.yaml plugins:

plugins:
  - name: '@lowdefy/plugin-dev-tools'
    version: 'workspace:*' # or a path/published version, depending on your setup

The bundled test app shows a working reference.

1. Clone the lowdefy-dev-tools repository alongside your other lowdefy project repositories.

2. Add the plugin to your lowdefy.yaml plugins (see Requirements above).

3. Install the dev-tools module and reference its panel component in the app-level overlay:

   modules:
     - id: dev_tools
       source: 'file:../../path/to/lowdefy-dev-tools/modules/dev-tools' # or github:/npm once published
       vars:
         color: '#1677ff' # optional: match the panel accent to your app
   
   overlay:
     devOnly: true # only inject under `lowdefy dev`, never in production builds
     blocks:
       - _ref:
           module: dev_tools
           component: panel

   overlay.blocks are prepended to every page, so there's no per-page wiring. Use overlay.exclude: [pageId, ...] to skip specific pages (e.g. login, 404), and devOnly: true to keep the tools out of production builds. Adjust the module source path to where you cloned this repo relative to your lowdefy.yaml.

4. Build and run your lowdefy project as normal, the tools will now be accessible via the floating button in the bottom corner:

   

   There is also a test-dev-tools app in this repository you can run and use for testing purposes.

No setup required — clone, install, run. The demo request hits a public JSON API, so there's no database or .env to configure.

pnpm install                      # installs deps and builds the code-editor plugin
cd apps/test-dev-tools
pnpm lowdefy:dev                  # dev server on http://localhost:3000
# or: pnpm exec lowdefy dev --no-open --port 3001 --watch ../../modules/dev-tools   # if 3000 is taken

Then open the app and click the Dev Tools button in the bottom corner. The test app also has a dark-mode toggle in the header so you can see the tools follow the theme.

Hot-reloading the tools: the lowdefy:dev/lowdefy:debug scripts pass --watch ../../modules/dev-tools. The dev-tools YAML lives outside the app directory, so Lowdefy's dev watcher wouldn't normally rebuild when you edit it — --watch adds that folder so changes to the tools hot-reload without restarting the server.

Trying a real database (optional): the test app ships a commented-out MongoDB connection and request. Uncomment both (in lowdefy.yaml and test-dev-tools.yaml), add a MONGODB_URI secret to apps/test-dev-tools/.env, and you'll have a live DB request to inspect instead.

modules/dev-tools/            # the tools, packaged as a Lowdefy module
  module.lowdefy.yaml         # manifest: exports the `panel` component + `color` var
  lowdefy_dev_tools.yaml      # FloatButton + Drawer + tabs (the `panel` component)
  view_state/                 # State/Global/User tree + search + Monaco editor + Apply/Copy + snapshots
  view_requests/              # request tree + status + viewer + history stepper + Δ diff + Refetch/Copy
  view_route/                 # location + URL query viewer; editable page/query/hash + Navigate
  view_triggers/              # Run tab: fire a request by id + set a State/Global key
  view_events/                # Events tab: sanitized _event_log viewer
  view_eval/                  # Eval tab: JS REPL over live state/global/user
plugins/plugin-dev-tools/     # Monaco `CodeEditor` + `KeyboardShortcut` blocks; LocalStorage*/EvalJs/SetUrlHash actions
apps/test-dev-tools/          # zero-config reference app (AxiosHttp demo request)