Product definition
Reduced a broad editor idea to one-day essentials: safe preview, useful statistics, draft persistence and HTML copying.
Open Source / Markdown / Daily Build
Markdown Split View
/ Overview
A private, dependency-free Markdown editor with safe live preview, writing statistics, local draft persistence and copyable HTML.
README files and technical notes are quick to write in Markdown, but switching between source and rendered output makes structure, formatting and unsafe embedded content harder to review.
/ Provided servicesClear thinking.
Clear thinking.
Practical delivery.
Interface design
Designed a high-contrast neo-brutalist workspace that keeps source and preview distinct on desktop and stacks them clearly on smaller screens.
Engineering
Separated the Markdown parser and statistics from DOM behavior, then tested rendering, escaping, links, code blocks and counts.
/ Solution
I built a local browser workspace that renders common Markdown primitives beside the source, escapes raw HTML, blocks unsafe URL schemes, preserves the draft locally and makes the generated HTML easy to copy.
/ Impact
Dependency-free local workflow
Five passing parser tests
Safe HTML and URL handling
Responsive keyboard-friendly split view
JavaScript modules
Block and inline rendering, HTML escaping, URL allow-listing, writing statistics and browser state.
HTML & CSS
Semantic editor and preview regions, live status feedback, responsive split layout and accessible labels.
Node test runner
Five tests covering block rendering, fenced code, unsafe input, inline formatting and writing statistics.