Skip to content
Public template

About

SRCL is an open-source React component and style repository that helps you build web applications, desktop applications, and static websites with terminal aesthetics.

Topics

Resources

Stars

1.6k stars

Watchers

11 watching

Forks

Repository files navigation

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.

About

SRCL is an open-source React component and style repository that helps you build web applications, desktop applications, and static websites with terminal aesthetics.

Topics

Resources

Stars

1.6k stars

Watchers

11 watching

Forks

Used by

Contributors

Languages