A lightweight, read-only code viewer designed for apps and dashboards that need clean, accurate code previews without the risks of an editor. It supports multiple languages with elegant syntax highlighting, optional tabs for multi-file previews, and a configurable gutter with line numbers. Developers can tailor typography, colors, and wrapping to match any design system while keeping the experience fast, accessible, and safe (no in-app editing or execution).

Functionality

• Syntax highlighting for popular languages (e.g., Dart, JS/TS, JSON, HTML/CSS, SQL).

• Tabs mode: preview multiple files with titles, plus an initial active tab.

• Gutter & line numbers: toggle visibility and customize styles.

• Typography controls: set font family/size, tab size, and normalized indent.

• Wrapping & scrolling: soft-wrap toggle with smooth horizontal scroll for long lines.

• Selectable text: users can select and copy code safely to clipboard.

• Theming: full color control (background, keywords, strings, comments, punctuation, line number styles, etc.) with dark/light readiness.

• Toolbar (optional): quick actions such as search/find, copy, and go-to-line.

• Responsive & performant: renders large snippets smoothly on mobile and desktop.

Use Cases

• Documentation & tutorials inside your app (read-only code samples).

• Release notes & changelogs with highlighted diffs/snippets.

• Admin panels & dashboards that display config files or API examples.

• Education & onboarding (courses, labs, inline code walkthroughs).

• Marketplace item previews where editing is not desired or permitted.

Keywords

Code viewer, read-only code, syntax highlighting, line numbers, code tabs, code preview widget, clipboard copy, code wrapping, theming, developer documentation, Flutter/FlutterFlow UI component.