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=devaslife&utm_medium=youtube&utm_campaign=vlog&utm_content=gxBis8EgoAg ▶ The GitHub repository of the Markdown editor tutorial https://github.com/craftzdog/electron-markdown-editor-tutorial ▶ My dotfiles https://github.com/craftzdog/dotfiles-public ▶ My terminal set up https://www.youtube.com/watch?v=KKxhf50FIPI ▶ My NeoVim set up https://www.youtube.com/watch?v=FW2X1CXrU1w ▶ 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 https://twitter.com/inkdrop_app ▶ Blog https://blog.inkdrop.app/ ▶ Instagram https://instagram.com/craftzdog Credits: ▶ BGM: Epidemic Sound https://www.epidemicsound.com/referral/p96aa8/ 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 #electron #reactjs #typescript