Maxi (@_onmax) header
Maxi (@_onmax) profile picture

Maxi

@_onmax

Open Source Maintainer - Nuxt Team Building https://nitter.cf/t.co/muSlDXFEiG, https://nitter.cf/t.co/zhApas99LS, https://nitter.cf/t.co/VeIiLSVoZT

 Lund, Sweden
onmax.me
Joined January 2022
  • Tweets1.2K
  • Following249
  • Followers273
nuxt-formisch v0.1 is out, rebuilt on Formisch 1. One Valibot schema in shared/ types the form and validates the request body. With Nuxt UI, <FAutoForm :schema="LoginSchema" /> renders the whole form. I've used this in my projects for over a year. Never looked back. nuxt-formisch.onmax.me
One Valibot schema in shared/ used by a form and by a server route.

ALT One Valibot schema in shared/ used by a form and by a server route.

1
9
331
Comark renders Markdown to HTML 6-7x faster than remark, so I wrote a codemod to switch. pnpm dlx remark-to-comark migrate comark-ui.onmax.me/remark-to…
Terminal in vercel/next.js examples/blog-starter: running pnpm dlx remark-to-comark migrate prints src/lib/markdownToHtml.ts:5 rewritten, 0 findings, and Migrated: 1 unified chain rewritten.

ALT Terminal in vercel/next.js examples/blog-starter: running pnpm dlx remark-to-comark migrate prints src/lib/markdownToHtml.ts:5 rewritten, 0 findings, and Migrated: 1 unified chain rewritten.

Diff of src/lib/markdownToHtml.ts: the remark and remark-html imports become renderHtml from @comark/html and comarkOptions from remark-to-comark/setup, and remark().use(html).process(markdown) becomes renderHtml(markdown, comarkOptions({ html: false, gfm: false, frontmatter: false })).

ALT Diff of src/lib/markdownToHtml.ts: the remark and remark-html imports become renderHtml from @comark/html and comarkOptions from remark-to-comark/setup, and remark().use(html).process(markdown) becomes renderHtml(markdown, comarkOptions({ html: false, gfm: false, frontmatter: false })).

Bar chart, Markdown to HTML, median of 15 passes on Node 24.21.0. 49 READMEs of remark, rehype and unified packages: remark 1,176 ms, Comark 165 ms, 7.1 times faster. 515 Markdown files in the comark-ui repo: remark 982 ms, Comark 159 ms, 6.2 times faster.

ALT Bar chart, Markdown to HTML, median of 15 passes on Node 24.21.0. 49 READMEs of remark, rehype and unified packages: remark 1,176 ms, Comark 165 ms, 7.1 times faster. 515 Markdown files in the comark-ui repo: remark 982 ms, Comark 159 ms, 6.2 times faster.

2
20
620
I wanted a Markdown editor where several people edit the same doc live. So Comark UI has one now. Tiptap, Markdown in and Markdown out. Plug it into ViteHub Realtime and you get live cursors and who's editing. comark-ui.onmax.me/play/edit…
The Comark UI editor with Markdown on the left and rich text on the right, three people editing with named cursors, and avatars showing 3 editing.

ALT The Comark UI editor with Markdown on the left and rich text on the right, three people editing with named cursors, and avatars showing 3 editing.

1
1
22
665
Replying to @_onmax @one
The parsers are also TypeScript 7.1 content mappers, so importing a .yaml, .json5, .jsonc or .ini file gives you a typed object. tinyaml also has a YAML linter, an ESLint plugin and a Vite Doctor extension.
VS Code: app.ts imports config.yaml, and hovering config shows its TypeScript type with server.host as string and server.port as number. A misspelled key, config.server.prot, is a type error.

ALT VS Code: app.ts imports config.yaml, and hovering config shows its TypeScript type with server.host as string and server.port as number. A misspelled key, config.server.prot, is a type error.

VS Code: an ESLint warning on draft: no in site.yaml says no loads as the string "no", but PyYAML and yaml's YAML 1.1 schema read it as a boolean, and suggests quoting it.

ALT VS Code: an ESLint warning on draft: no in site.yaml says no loads as the string "no", but PyYAML and yaml's YAML 1.1 schema read it as a boolean, and suggests quoting it.

1
32
Gzip size and parse time for a large file, original → tiny: yaml → tinyaml/yaml 29.8 → 16.9 KiB, 35.9 → 2.9 ms json5 → tinyjson5/json5 7.5 → 3.2 KiB, 7.3 → 0.9 ms @one-ini/wasm → tinyini/one-ini 36.0 → 1.7 KiB, 7.2 → 0.6 ms Apple M4, Node 26.13.0.
Two bar charts covering all 18 drop-ins, original against tiny: gzip size in KiB and parse time for a large file in ms, for js-yaml 4 and 5, yaml, yamljs, @std/yaml, json5 2 and 1, strip-json-comments 3, 2 and 5, jsonc-parser, comment-json, jju, ini 7, 2 and 1, and @one-ini/wasm 0.2 and 0.1. tiny is smaller or the same size and faster on every row.

ALT Two bar charts covering all 18 drop-ins, original against tiny: gzip size in KiB and parse time for a large file in ms, for js-yaml 4 and 5, yaml, yamljs, @std/yaml, json5 2 and 1, strip-json-comments 3, 2 and 5, jsonc-parser, comment-json, jju, ini 7, 2 and 1, and @one-ini/wasm 0.2 and 0.1. tiny is smaller or the same size and faster on every row.

1
2
83
tiny v0.1.0 is out: dependency-free replacements for the YAML, JSON5 and INI parsers you already use. 18 drop-ins for 11 libraries. npx tinyswap It rewrites your imports and swaps the dependencies. Or change one import by hand. tiny.onmax.me 🧵
Two bar charts, original library against tiny. Gzip size in KiB: yaml 29.8 vs 16.9, json5 7.5 vs 3.2, @one-ini/wasm 36 vs 1.7. Parse time for a large file in ms: yaml 35.9 vs 2.9, json5 7.3 vs 0.9, @one-ini/wasm 7.2 vs 0.6.

ALT Two bar charts, original library against tiny. Gzip size in KiB: yaml 29.8 vs 16.9, json5 7.5 vs 3.2, @one-ini/wasm 36 vs 1.7. Parse time for a large file in ms: yaml 35.9 vs 2.9, json5 7.3 vs 0.9, @one-ini/wasm 7.2 vs 0.6.

2
2
1
17
796
I got tired of writing enabled === 'true' for env flags. nuxt-safe-runtime-config converts each env override to the type in your schema. NUXT_PERF_TRACE_ENABLED=1 is true, not "1". And useSafeRuntimeConfig() is fully typed. nuxt-safe-runtime-config.onm…
NUXT_PERF_TRACE_ENABLED=1 in .env, a boolean() field in the schema, and a server route where config.perfTrace.enabled shows the type boolean.

ALT NUXT_PERF_TRACE_ENABLED=1 in .env, a boolean() field in the schema, and a server route where config.perfTrace.enabled shows the type boolean.

11
423
Comark UI now picks up the theme of Nuxt UI and shadcn/ui apps on its own. It reads their CSS variables for colors, radius and dark mode. No Nuxt UI or shadcn? It ships a default theme, so it works with zero setup. comark-ui.onmax.me/guide/the…
The same Comark document rendered twice, once with Nuxt UI's variables and once with shadcn/ui's.

ALT The same Comark document rendered twice, once with Nuxt UI's variables and once with shadcn/ui's.

1
1
32
984
I asked Opus to teach me my own Nuxt PR. It came back with a 3 minute video: voiceover, animations synced to every word, and a quiz at the end. github.com/nuxt/nuxt/pull/36…
1
1
10
494
the new comark ui badges goes really hard with npmx.dev npmx.dev/package/comark-ui
Comark UI on npmx.dev with a red rectangle around the README badges for npm version, downloads, license, and docs.

ALT Comark UI on npmx.dev with a red rectangle around the README badges for npm version, downloads, license, and docs.

2
18
1,474
Load more