lognal
A log viewer that looks and behaves like a terminal, for the web and for Flutter. It draws log output on a canvas instead of an element per line, so a fast stream of messages and a history of tens of thousands of entries cost the same frame, and an application does not have to build its own console panel.
About this project
lognal is a log viewer for applications that need to show output on their own screen: a console panel in a web page, a debug view in a Flutter app, or a reader for a log file. It keeps entries as plain data and draws only the visible rows on a canvas, so the cost of a frame depends on what is on screen rather than on the length of the history. The core underneath — the store, the filter, the text shaping and the layout — is written twice, in TypeScript and in Dart, file for file, so a line wraps, measures and matches a search the same way in a browser and in an app.
It mirrors what the runtime already prints — console.log, console.table and console.group in a browser, print and debugPrint in Flutter — while the original output keeps working, and it reads log files, detecting the encoding, turning ANSI escape codes into colour and following a file that keeps growing. Objects, lists, maps and errors are captured when they are logged and open and close in place. The toolbar follows new entries, filters by text and by level, and searches by highlighting every match instead of hiding the rest, and an optional input line passes commands to a handler and prints the replies. Korean and other wide characters stay on the grid, Hangul words stay together when a line wraps, and the input line waits for the input method to finish composing. The controls are real buttons with accessible names, and a hidden list mirrors the visible entries for screen readers.
The npm package has no runtime dependencies: React is an optional peer, needed only for the component under lognal/react, and the stylesheet is one import. The Flutter package depends on the Flutter SDK alone and is built on the widgets layer without Material or Cupertino, so it sits inside any app without bringing a second design system along. Six palettes are built in, auto follows the system's light or dark setting, and a theme of your own is one block of CSS custom properties or one call to buildTheme. The JavaScript package is ESM with TypeScript declarations, and each package has its own version and changelog.
Features
Documentation site
TypeScript types
Multiple languages
Verified by tests
Cross-platform
Accessibility built in
Dark mode
Tree-shakeable
No dependencies