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:

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

I hope you enjoy it!

▶ Download my product: Inkdrop - Markdown note-taking app
https://www.inkdrop.app/?utm_source=d...

▶ The GitHub repository of the Markdown editor tutorial
https://github.com/craftzdog/electron...
▶ My dotfiles
https://github.com/craftzdog/dotfiles...
▶ My terminal set up
   • My Fish shell workflow for coding  
▶ My NeoVim set up
   • How to set up Neovim 0.5 (LSP, Treesi...  
▶ My equipments
Computer: Mac Pro
Display: Pro Display XDR
Keyboard: Keychron K2V2
Video editing: Final Cut Pro X
Camera: Fujifilm X-T4
Slider: SliderONE v2

Follow me online here:
▶ Subscribe Newsletter https://www.devas.life/
▶ Twitter   / inkdrop_app  
▶ Blog https://blog.inkdrop.app/
▶ Instagram   / craftzdog  

Credits:
▶ BGM: Epidemic Sound https://www.epidemicsound.com/referra...

0:00 Digest
0:28 Intro
1:03 Create a repository from a project boilerplate
https://github.com/cawa-93/vite-elect...
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

#electron #reactjs #typescript