Blocks

Each block reads from a workspace store that holds your OpenAPI document(s). You create and control the store, then hand it to a block along with the operation you want to render.

Installation#

npm install @scalar/blocks

Usage#

import { createWorkspaceStore } from '@scalar/workspace-store/client'
import { createCodeExample } from '@scalar/blocks/code-example'
import '@scalar/blocks/style.css'
 
// Load your OpenAPI document(s) into a store
const store = createWorkspaceStore()
 
await store.addDocument({
  name: 'default',
  url: '/openapi.json',
})
 
// Mount a block into a DOM element
createCodeExample('#block', {
  store,
  path: '/hello',
  method: 'post',
  selectedClient: 'node/undici',
  selectedServer: {
    url: 'https://api.example.com',
  },
})

Available blocks#

Code Example — Render a copy-pasteable request snippet for a single operation, with a client picker and example selector.

More blocks are on the way.

Updated Sep 24, 2026