Building a Markdown Editor from a design perspective
summary
A concrete UX-to-code case: a reusable Markdown+ editor with a plugin system that inserts snippets which render as React components (charts, maps, tooltips) in preview, implemented inside Elastic UI and published open source on eui GitHub. Design work uses Figma, implementation uses Sass with experiments toward CSS‑in‑JS, and the team discovers missing error states, keyboard accessibility fixes, and TypeScript tradeoffs during engineering. The component ships, documents plugin API and demos, and enters adoption with clear examples of embedding visualizations.
AI-written summary · about
chapters (14)
- 0:00Introduction
- 1:25About Elastic
- 3:04Background
- 4:31Deciding what to build
- 5:46The team
- 6:40The Roadmap
- 7:20Exploration Phase
- 10:04Feature Spec
- 10:31Track Progress
- 13:49Phase 3 Design
- 17:15Phase 4 Implementation
- 19:19Documentation
- 23:42Future plans
- 24:09Lessons learned
related talks
30mDesigning with React
41mMarkdownEditor: The Next Step in Working with Text
28mFrom Sketch to Code Designing a Component Kit
39mDesigning with Components
49mDesign Tools Should Read and Write Code
15mModern Approach to Designer ❤️ Developer Collaboration
35mDesign system - From a Developer Point-of-View
29mDesigning with Code in Mind