Scratch

Embeddable Scratch GUI React component.

Install

pnpm add @foxford/scratch

Peer dependencies: react / react-dom (^17 or ^18).

Usage

import { Scratch } from '@foxford/scratch';

<Scratch
  configuration={{
    assetHost: 'https://static.ngcdn.ru/scratch/static/assets/',
    basePath: 'https://static.ngcdn.ru/scratch/',
    projectHost: 'https://static.ngcdn.ru/scratch/projects',
  }}
  locale="ru-RU"
  projectId={10128407}
/>;

configuration is required:

• assetHost is used for Scratch asset loading.
• basePath must match where runtime assets are served, with static/ and fallback-assets/ under it.
• projectHost is used for project loading by ID.

Scratch runtime assets are served from https://static.ngcdn.ru/scratch/.

locale is passed to the component, translations are not passed as props.

If you want to load project from in-memory config instead of API:

<Scratch
  configuration={...}
  locale="en-US"
  projectId="embedded-playground-project"
  projectConfig={myProjectConfig}
/>;

Important: for projectConfig mode, pass a non-null projectId (any stable string/number is fine). With projectId={null}, scratch-gui falls back to its default empty project.

Playground

pnpm --filter @foxford/scratch dev