Cradic

English | 简体中文

A library that deconstructs Chinese characters into radicals and reassembles them for intriguing visual effects.

cradic ≈ chinese radical

Installation

You need Node.js ≥ 22.18.0 installed.

npm install cradic
# or: pnpm add cradic

Features

• Multi‑format output: HTML, SVG, Typst, Plain text
• Chainable API: Fluent interface for configuration
• Browser + Node.js: Works in both environments

Quick Start

import { from } from 'cradic';

// Generate html and save
from('一个简单的汉字结构拆解测试').to('html').saveAs('output.html');

// Generate text and output to console
from('一个简单的汉字结构拆解测试').to('text').log();
// -> '一人丨⺮间单白勺氵又宀子纟吉木勾扌斥解氵则讠式'

You can also directly try the Live Demo .

API

from(string)

Create a Cradic instance with input string.

const cr = from('汉字');

.to(type)

Set output format. Default is html.

• html – HTML document with CSS (recommended)
• svg – SVG grid layout
• typ – Typst document
• text – Plain text with radical replacements
• png | jpg | pdf | avif – Binary files (Node.js only)

from('汉字').to('svg')

.with(params)

Override default parameters. Parameters are merged with the defaults of the chosen output type (set by .to()).

• mode ('b'|'h'|'v') – Controls split directions (works for all types). Default 'b'.
• sep – Separator for text output (only works with .to('text')). Use 'auto' for smart separator: two newlines before vertically-split characters, space before others.

from('汉字').to('text').with({ mode: 'h' }).log();  // '氵又字'
from('汉字').to('text').with({ sep: ' ' }).log();   // '氵又 宀子'

For a full list of type-specific parameters (cell size, colors, fonts, etc.), see docs/params.md.

.log()

Print output to console.

from('汉字').to('html').log();

.saveAs(filename)

Save to file.

• Node.js: Write to local file
• Browser: Trigger download

await from('汉字').to('html').saveAs('output.html');

.toStr()

Get output as string. This method returns a Promise<string>, so please use await.

const html = await from('汉字').to('html').toStr();

Browser Usage

<script type="module">
  import { from } from './cradic.browser.js';

  const html = await from('汉字').to('html').toStr();
  document.body.innerHTML = html;
</script>

Node.js Usage

import { from } from 'cradic';

await from('汉字').to('html').saveAs('output.html');

You can also check tests/demos.

Binary Files Generation (Node.js only, optional)

Requires external tools:

• rsvg-convert for PNG/JPG
• typst for PDF
• avifenc for AVIF

await from('汉字').to('png').saveAs('output.png');
await from('汉字').to('pdf').saveAs('output.pdf');

Build

npm run build:node     # Build for nodejs
npm run build:browser  # Build for browser

Contribute

If you'd like to contribute to the codebase, please follow these steps:

1. Fork the repository and create your feature branch:

   git checkout -b new-feature
   npm install && chmod +x .githooks/*

2. Commit your changes with a clear message (e.g., using Conventional Commits):

   git commit -m "feat: add some feature"

3. Push to your branch:

   git push origin new-feature

4. Open a Pull Request. Make sure to review the pull request template at .github/PULL_REQUEST_TEMPLATE.md before submitting.

License

The source code of this project is released under the MIT License.
The data in assets/h.json and assets/v.json is partly sourced from (https://github.com/kfcd/chaizi) and is licensed under CC BY 3.0.