{"id":25087,"library":"code-fns","title":"code-fns","description":"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.","status":"active","version":"0.11.0","language":"javascript","source_language":"en","source_url":"https://github.com/Ross-Esmond/code-fns","tags":["javascript","syntax","code","ast","highlight","highlighting","typescript"],"install":[{"cmd":"npm install code-fns","lang":"bash","label":"npm"},{"cmd":"yarn add code-fns","lang":"bash","label":"yarn"},{"cmd":"pnpm add code-fns","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Language parsing and AST generation for syntax highlighting","package":"tree-sitter","optional":false}],"imports":[{"note":"Package is ESM-only; no CJS support.","wrong":"const ready = require('code-fns')","symbol":"ready","correct":"import { ready } from 'code-fns'"},{"note":"All named exports are at top-level; no subpath exports.","wrong":"import { language } from 'code-fns/tags'","symbol":"language","correct":"import { language } from 'code-fns'"},{"note":"","wrong":null,"symbol":"parse","correct":"import { parse } from 'code-fns'"}],"quickstart":{"code":"import { ready, language, parse } from 'code-fns';\n\nasync function highlight() {\n  await ready({ langs: ['javascript'] });\n  const js = language.javascript;\n  const tokens = parse(js`const x = 42;`);\n  console.log(tokens);\n  // [\n  //   { code: 'const ', color: '#c9d1d9' },\n  //   { code: 'x', color: '#79c0ff' },\n  //   { code: ' = ', color: '#c9d1d9' },\n  //   { code: '42', color: '#a5d6ff' },\n  //   { code: ';', color: '#c9d1d9' }\n  // ]\n}\n\nhighlight().catch(console.error);","lang":"typescript","description":"Demonstrates basic usage: import, initialize a language, parse a code string into tokens with colors."},"warnings":[{"fix":"Use a bundler or transpiler (e.g., Babel, esbuild, Webpack) in your build step.","message":"Package requires modern EcmaScript features; no transpilation included.","severity":"breaking","affected_versions":">=0.0.0"},{"fix":"Always call `await ready({ langs: [...] })` before parsing.","message":"The `ready` function must be awaited before using `language` or `parse`.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Refer to the list of supported tree-sitter grammars; use exact spelling.","message":"Language names are case-sensitive and must match exact property keys (e.g., `javascript` not `js`).","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Handle the 'morph' field when rendering (e.g., for animations).","message":"The `diff` function returns tokens with a 'morph' property; the output format differs from `parse`.","severity":"gotcha","affected_versions":">=0.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Add `await ready({ langs: ['javascript'] });` before accessing `language.javascript`.","cause":"`ready` was not called or not awaited before using `language`.","error":"Error: Must call `ready` before accessing `language`"},{"fix":"Switch to ES module import syntax: `import { ready } from 'code-fns'`.","cause":"Using CommonJS require() on an ESM-only package.","error":"TypeError: code_fns_1.default is not a function"},{"fix":"Use the exact language identifier (e.g., 'javascript' for JS).","cause":"Passing an incorrect language name string.","error":"Error: Unsupported language 'js'. Supported languages: ..."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}