How to build a Markdown editor using Electron, ReactJS, Vite, CodeMirror, and Remark
Hello. I'm Takuya Matsuyama from Japan, a solo developer making a Markdown note-taking app called Inkdrop.
This video is a tutorial on how to build a beautiful Markdown editor with the following stack:
Hello. I'm Takuya Matsuyama from Japan, a solo developer making a Markdown note-taking app called Inkdrop.
This video is a tutorial on how to build a beautiful Markdown editor with the following stack:
- Electron: https://www.electronjs.org/ - A framework for building cross-platform desktop apps using HTML, JS, and CSS
- Vite: https://vitejs.dev/ - A fast build tool
- React: A library for building UI
- TypeScript: A typed JavaScript
- CodeMirror 6: https://codemirror.net/6/ - An extensible code editor for the web
- Remark: https://remark.js.org/ - An extensible Markdown processor
0:00 Digest
0:28 Intro
1:03 Create a repository from a project boilerplate https://github.com/cawa-93/vite-electron-builder
3:02 Set up the project to use React intead of Vue
10:50 Make window transparent and vibrant
11:53 Set up CodeMirror 6
17:47 Make an editor component
22:58 Make the editor support Markdown and apply the dark theme
26:31 Set up Remark
32:45 Implement syntax highlighting for Markdown preview
38:56 Compile the app and run
39:43 Demo