SRCL

Live Demo

SRCL is an open-source React component and style repository that helps you build web applications, desktop applications, and static websites with terminal aesthetics. Its modular, easy-to-use components emphasize precise monospace character spacing and line heights, enabling you to quickly copy and paste implementations while maintaining a clean, efficient codebase.

Use Node.js 22.12+ on the 22.x line, 24.x, or 26+ (^22.12.0 || ^24.0.0 || >=26.0.0), as required by the repository's tooling. Node.js 18, 20, 23, and 25 are outside the supported range.

npm install
npm run dev

Go to http://localhost:10000 in your browser of choice.

We use Vercel for hosting.

Tests

Run the type check, CLI primitive tests, component documentation guards, documentation-route tests, and Python tests:

npm test

This runs three gates: TypeScript type-check, the vitest suite, and the Python unittest suite (which includes a parity test between the JS and Python CLI runtimes). If python3 is not on your PATH, the Python suite skips with a warning. Use npm run test:js or npm run test:python to run a single suite.

Sacred CLI Templates

Sacred ships a tiny zero-dependency CLI framework under scripts/cli/lib. The framework reads its palette from scripts/cli/colors.json; global.css mirrors that palette for React. Two reference templates demonstrate the same layout in two languages, with language-specific sample data:

npm run cli:typescript
npm run cli:python

cli:typescript runs scripts/cli/templates/template.ts via tsx. cli:python runs scripts/python/templates/template.py against a snake_case Python mirror of the framework under scripts/python/sacred_cli. Both screens use the alt screen buffer and raw mode keyboard input — press Esc or Ctrl-C to exit. The same template is also mounted as a React component on the kitchen sink page (search for CLI TEMPLATE EXAMPLE).

If you want to write your own CLI screen or port a sacred React surface to a terminal, the four porting skills under skills/ walk through the conventions:

  • skills/port-sacred-terminal-ui-to-typescript-cli/SKILL.md
  • skills/port-sacred-terminal-ui-to-python/SKILL.md
  • skills/port-sacred-terminal-ui-to-react-using-same-conventions/SKILL.md
  • skills/port-sacred-terminal-ui-to-hostile-react-codebase/SKILL.md

Documentation URLs

The documentation routes publish AGENTS.md and SKILL.md files from traversed, non-hidden directories, plus top-level components/*.tsx source, so humans and agents can read them without cloning. Dependency, build, Git, and .workdir directories are excluded. Other Markdown files, including README.md, are outside the allowlist:

Adding an allowlisted instruction document or top-level component source makes it discoverable for the next build. Component sources use the .tsx.txt URL suffix. Both /llms.txt and /llms-full.txt follow the llmstxt.org convention.

Contact

If you have questions ping me on Twitter, @wwwjim. Or you can ping @internetxstudio.