View Code? Open in Web Editor
NEW
✍️ A local-first Markdown note-taking app built with Vue.js, Tailwind CSS, and Electron.
License: MIT License
JavaScript 91.62%
HTML 3.66%
CSS 3.06%
TypeScript 1.66%
graphite's Introduction
⚠️ This repo is for demo purposes only ⚠️
⚠️ Don't use Graphite to edit local files ⚠️
A local-first Markdown note-taking app built with Vue.js, Tailwind, and Electron.
- In 2020, I quit my tech job to focus on creating web development tutorials on YouTube.
- After spending a few months playing around with different technologies, I decided to focus on Vue + Tailwind.
- In order to test how far I've come with the tech stack, I made Graphite, a local-first markdown note-taking app.
- Note: I built Graphite in ~1 week so don't mind the code quality or lack of tests.
Demo GIF (takes a few seconds to load)
![](/demo/_graphite.gif)
![](/demo/00_dracula.png)
![](/demo/00_gruvbox.png)
![](/demo/00_monokai.png)
![](/demo/02_file_search.png)
![](/demo/03_md_preview.png)
- Stack
- Libraries
- Marked (convert markdown to html)
- CodeMirror (builing your own editor is hard)
- Hotkeys (makes keyboard shortcuts easy)
- Basic
- Add/remove/rename/move files
- Markdown preview
- CodeMirror editor
- Keybindings
- Open file search ->
command + o
- Close file search ->
esc
- Toggle sidebar ->
command + b
- Configurable Themes with CSS Variables
- TODO
- WYSIWYG
- Add/remove/rename/move folders
- Watch for file changes in Electron and persist changes automatically
- Actually release a desktop app for Mac/Windows/Linux
graphite's People
Contributors
Watchers