code-fns

library0.11.0jsnpmunverified

code-fns (v0.11.0) is a JavaScript/TypeScript library for syntax highlighting and code visualization that outputs raw text and hex color tokens instead of HTML/CSS. It is designed for non-web rendering targets such as animations and videos, and is the primary highlighting engine for Motion Canvas. The library supports many languages via tree-sitter grammars, includes a diffing function to compute token-level transformations between code blocks (useful for animations), and ships TypeScript types. It is released on npm with an irregular cadence and requires modern EcmaScript features, so bundling/transpilation is left to the consumer. Key differentiators: output is language-agnostic token arrays, not DOM elements; built-in diff/morph support for transitions; no built-in theming—colors come straight from tree-sitter.

data serialization

npm install code-fns

github ↗package ↗

INSTALL

IMPORT

SIG · CODE-FNS

code-fns

datajavascriptv0.11.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

ready

✓ import { ready } from 'code-fns'

✗ const ready = require('code-fns')

Package is ESM-only; no CJS support.

language

✓ import { language } from 'code-fns'

✗ import { language } from 'code-fns/tags'

All named exports are at top-level; no subpath exports.

parse

✓ import { parse } from 'code-fns'

Demonstrates basic usage: import, initialize a language, parse a code string into tokens with colors.

import { ready, language, parse } from 'code-fns'; async function highlight() { await ready({ langs: ['javascript'] }); const js = language.javascript; const tokens = parse(js`const x = 42;`); console.log(tokens); // [ // { code: 'const ', color: '#c9d1d9' }, // { code: 'x', color: '#79c0ff' }, // { code: ' = ', color: '#c9d1d9' }, // { code: '42', color: '#a5d6ff' }, // { code: ';', color: '#c9d1d9' } // ] } highlight().catch(console.error);

Debug

Known issues

breakingPackage requires modern EcmaScript features; no transpilation included.

fix

Use a bundler or transpiler (e.g., Babel, esbuild, Webpack) in your build step.

affects: >=0.0.0

gotchaThe `ready` function must be awaited before using `language` or `parse`.

fix

Always call `await ready({ langs: [...] })` before parsing.

affects: >=0.0.0

gotchaLanguage names are case-sensitive and must match exact property keys (e.g., `javascript` not `js`).

fix

Refer to the list of supported tree-sitter grammars; use exact spelling.

affects: >=0.0.0

gotchaThe `diff` function returns tokens with a 'morph' property; the output format differs from `parse`.

fix

Handle the 'morph' field when rendering (e.g., for animations).

affects: >=0.0.0

Errors

Common errors & fixes

Error: Must call `ready` before accessing `language`

`ready` was not called or not awaited before using `language`.

fix

Add `await ready({ langs: ['javascript'] });` before accessing `language.javascript`.

TypeError: code_fns_1.default is not a function

Using CommonJS require() on an ESM-only package.

fix

Switch to ES module import syntax: `import { ready } from 'code-fns'`.

Error: Unsupported language 'js'. Supported languages: ...

Passing an incorrect language name string.

fix

Use the exact language identifier (e.g., 'javascript' for JS).

Upgrade

Version history

0.11.0latest on npm

Audit

Dependencies

tree-sitterrequiredLanguage parsing and AST generation for syntax highlighting

Agent activity

21 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/Ross-Esmond/code-fns ↗

packagehttps://www.npmjs.com/package/code-fns ↗