{"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,"search_vec":"'agnost':109 'anim':40,77 'array':111 'ast':137 'block':74 'built':116,124 'built-in':115,123 'bundling/transpilation':97 'cadenc':90 'canva':51 'code':2,5,16,73,136 'code-fn':1,4 'color':24,127 'come':128 'comput':67 'consum':102 'design':31 'dif':64 'diff/morph':118 'differenti':104 'dom':113 'ecmascript':94 'element':114 'engin':48 'featur':95 'fns':3,6 'function':65 'grammar':61 'hex':23 'highlight':14,47,138,139 'html/css':28 'includ':62 'instead':26 'irregular':89 'javascript':134 'javascript/typescript':10 'key':103 'languag':56,108 'language-agnost':107 'left':99 'level':70 'librari':11,53 'mani':55 'modern':93 'motion':50 'non':34 'non-web':33 'npm':86 'output':19,105 'primari':46 'raw':20 'releas':84 'render':36 'requir':92 'ship':79 'sitter':60,133 'straight':129 'support':54,119 'syntax':13,135 'target':37 'text':21 'theme':126 'token':25,69,110 'token-level':68 'transform':71 'transit':121 'tree':59,132 'tree-sitt':58,131 'type':81 'typescript':80,140 'use':75 'v0.11.0':7 'via':57 'video':42 'visual':17 'web':35","created_at":"2026-05-01T13:42:56.407994+00:00","updated_at":"2026-05-01T13:42:56.407994+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/Ross-Esmond/code-fns","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/code-fns","openapi_spec":null,"status_page":null,"smithery":null,"categories":["data","serialization"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-05-01","next_check":"2026-07-30","install_tag":null}}