{"id":12027,"library":"simple-code-frame","title":"Simple Code Frame","description":"Simple Code Frame is a lightweight JavaScript utility designed for generating structured code frames, primarily used in error reporting or diagnostic tools. Its current stable version is 1.3.0. Unlike more comprehensive alternatives like `@babel/code-frame`, `simple-code-frame` distinguishes itself by operating directly on raw string input without requiring an AST parser. This focused design makes it exceptionally small and performant for tasks that only involve highlighting specific lines and columns within arbitrary text. The library ships with TypeScript types, providing a good developer experience for both JavaScript and TypeScript projects. Releases appear to follow a moderate cadence, adding features like `maxWidth` for line truncation and colored output in recent minor versions. It is suitable for environments where parsing overhead is undesirable, focusing solely on visual presentation of code context.","status":"active","version":"1.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/marvinhagemeister/simple-code-frame","tags":["javascript","typescript"],"install":[{"cmd":"npm install simple-code-frame","lang":"bash","label":"npm"},{"cmd":"yarn add simple-code-frame","lang":"bash","label":"yarn"},{"cmd":"pnpm add simple-code-frame","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"The primary function `createCodeFrame` is a named export. Default import is incorrect.","wrong":"import createCodeFrame from 'simple-code-frame';","symbol":"createCodeFrame","correct":"import { createCodeFrame } from 'simple-code-frame';"},{"note":"For CommonJS environments, `createCodeFrame` is a named property of the module export.","wrong":"const createCodeFrame = require('simple-code-frame');","symbol":"createCodeFrame (CJS)","correct":"const { createCodeFrame } = require('simple-code-frame');"},{"note":"TypeScript types for options and return values are available as named exports.","symbol":"Types","correct":"import type { CodeFrameOptions } from 'simple-code-frame';"}],"quickstart":{"code":"import { createCodeFrame } from 'simple-code-frame';\n\nconst sourceCode = `function greet(name) {\n  console.log('Hello, ' + name + '!');\n  throw new Error('Something went wrong');\n}\n\ngreet('World');`;\n\n// Simulate an error at line 3, column 9\nconst errorFrame = createCodeFrame(sourceCode, 3, 9, {\n  highlightColor: 'red',\n  message: 'Error here!'\n});\n\nconsole.log(errorFrame);\n\n// Example with maxWidth and no message\nconst longLineCode = `const veryLongVariableName = 'This is a very long string that should be truncated by maxWidth.';\nconsole.log(veryLongVariableName);`;\nconst truncatedFrame = createCodeFrame(longLineCode, 1, 1, { maxWidth: 50 });\nconsole.log('\\n--- Truncated Frame ---\\n');\nconsole.log(truncatedFrame);","lang":"typescript","description":"Demonstrates generating a code frame for a specific line and column, including options for highlighting and message, and usage of `maxWidth` for truncation."},"warnings":[{"fix":"Always use 1-based indexing for line and column arguments to ensure correct highlighting.","message":"Line and column numbers for `createCodeFrame` are 1-based, not 0-based. Providing 0 for either will not correctly target the first line/column.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Validate line and column inputs against the actual content length or lines count if precise highlighting is critical.","message":"When the `line` or `column` argument points to a location outside the bounds of the provided code string, the code frame will still be generated but the marker ('>' and '^') might not appear, leading to unexpected output without an explicit error.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Ensure the terminal supports ANSI colors or avoid using `highlightColor` option in environments where color support is uncertain or undesired.","message":"Colored output (using `highlightColor`) may not display correctly in terminals that do not support ANSI escape codes, or if the `NO_COLOR` environment variable is set. The library does not force colors.","severity":"gotcha","affected_versions":">=1.1.0"},{"fix":"Test different `maxWidth` values to find an appropriate balance between readability and conciseness for your specific use case.","message":"The `maxWidth` option truncates lines with an ellipsis ('...') if they exceed the specified width. This only applies to the highlighted line and its context, not the entire source.","severity":"gotcha","affected_versions":">=1.2.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure the first argument passed to `createCodeFrame` is always a string containing the source code.","cause":"The `code` argument passed to `createCodeFrame` was not a string.","error":"TypeError: code.split is not a function"},{"fix":"Verify that the `code` input parameter is a valid string before calling `createCodeFrame`.","cause":"Similar to `code.split is not a function`, this typically means `code` was `null`, `undefined`, or some other non-string value where the library expected a string.","error":"TypeError: Cannot read properties of undefined (reading 'split')"}],"ecosystem":"npm"}