Skip to content
FrogUI

devtools

Built-in devtools with live preview, hot reload, time-travel debugging, and more.

Import

import { devtools } from 'frog/dev'

Usage

Check out the Devtools Guide for more information on features and how the devtools work.

import { Frog } from 'frog'
import { devtools } from 'frog/dev'
import { serveStatic } from 'frog/serve-static'
 
export const app = new Frog({ title: 'Frog Frame' }) 
 
app.frame('/', (c) => { ... })
 
devtools(app, { serveStatic })

Parameters

appFid

  • Type: number | undefined

Custom Farcaster application FID for the devtools instance.

import { Frog } from 'frog'
import { devtools } from 'frog/dev'
 
export const app = new Frog({ title: 'Frog Frame' }) 
 
app.frame('/', (c) => { ... })
 
devtools(app, {
  appFid: 123,
})

appMnemonic

  • Type: string | undefined

Custom Farcaster application mnemonic for the devtools instance.

import { Frog } from 'frog'
import { devtools } from 'frog/dev'
 
export const app = new Frog({ title: 'Frog Frame' }) 
 
app.frame('/', (c) => { ... })
 
devtools(app, {
  appMnemonic: 'foo bar baz ...',
})

assetsPath

  • Type: string | undefined

The base path for devtools' assets.

import { Frog } from 'frog'
import { devtools } from 'frog/dev'
 
export const app = new Frog({ title: 'Frog Frame' }) 
 
app.frame('/', (c) => { ... })
 
devtools(app, {
  assetsPath: '/.frog',
})

basePath

  • Type: string
  • Default: '/dev'

The base path for the devtools instance off the Frog instance's bathPath.

import { Frog } from 'frog'
import { devtools } from 'frog/dev'
import { serveStatic } from 'frog/serve-static'
 
export const app = new Frog({ title: 'Frog Frame' }) 
 
app.frame('/', (c) => { ... })
 
devtools(app, {
  basePath: '/debug', // devtools available at `http://localhost:5173/debug`
  serveStatic,
})

serveStatic

  • Type: ServeStaticFunction | undefined

Platform-dependent function to serve devtools' static files.

Node.js
import { Frog } from 'frog'
import { devtools } from 'frog/dev'
import { serveStatic } from 'frog/serve-static'
 
export const app = new Frog({ title: 'Frog Frame' }) 
 
devtools(app, {
  serveStatic,
})

serveStaticOptions

  • Type: Inferred
  • Default: { root: '<resolved path to frog/_lib/ui>', rewriteRequestPath: (path) => path.replace(devBasePath, '') }

Parameters to pass to the serveStatic function.

Cloudlare Workers
import { Frog } from 'frog'
import { devtools } from 'frog/dev'
import { serveStatic } from 'hono/cloudflare-workers'
 
export const app = new Frog({ title: 'Frog Frame' }) 
 
devtools(app, {
  serveStatic, 
  serveStaticOptions: {
    manifest: await import('__STATIC_CONTENT_MANIFEST'),
    root: './',
  },
})