Show Vue: Snippet Editor – a code screenshot maker built with Vue 3 and CodeMirror 6

[markodenic]

Sharing Snippet Editor, a free code screenshot maker built with Vue 3 (Options API), Vite, Tailwind CSS and CodeMirror 6. Paste code, pick a theme, font, background and window style, and export a PNG or copy it to the clipboard. No account.

A few Vue details that might be useful if you build something similar:

• One flat settings object. App.vue owns all editor state in a single settings object. Child components never mutate it; they emit update(key, value) and the root applies it. That made persistence to localStorage (minus the code itself) and the Reset button trivial.
• CodeMirror 6 without re-creating the editor. Theme, language, line numbers, font and line highlighting each live in their own Compartment. A watcher on the relevant setting calls view.dispatch({ effects: compartment.reconfigure(...) }), so switching a theme keeps the cursor, scroll position and undo history.
• Share links without a backend. The whole settings object, including the code, is serialized into the URL hash. The hash never reaches the server, so a shared snippet is just a link.

Happy to hear feedback, especially on the editor UX.