https://github.com/suboptimaleng/graphite
✍️ A local-first Markdown note-taking app built with Vue.js, Tailwind CSS, and Electron.
https://github.com/suboptimaleng/graphite
electron javascript local-first markdown markdown-editor note-taking productivity productivity-app tailwindcss vuejs
Last synced: 5 months ago
JSON representation
✍️ A local-first Markdown note-taking app built with Vue.js, Tailwind CSS, and Electron.
- Host: GitHub
- URL: https://github.com/suboptimaleng/graphite
- Owner: SuboptimalEng
- License: mit
- Created: 2021-06-02T18:33:35.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-07-12T22:12:41.000Z (over 2 years ago)
- Last Synced: 2025-03-30T22:41:32.270Z (7 months ago)
- Topics: electron, javascript, local-first, markdown, markdown-editor, note-taking, productivity, productivity-app, tailwindcss, vuejs
- Language: JavaScript
- Homepage:
- Size: 9.39 MB
- Stars: 21
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
### ⚠️ This repo is for demo purposes only ⚠️
### ⚠️ Don't use Graphite to edit local files ⚠️
---
# ✍️ Graphite - [Video Explanation](https://www.youtube.com/watch?v=Z8ufG29c0_A)
### 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](youtube.com/SuboptimalEng).
- 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)
### Images
#### Dracula Theme
#### Gruvbox Theme
#### Monokai Theme
#### File Search
#### Markdown Preview
### 💻 Tech Stack
- Stack
- [Vue.js](https://vuejs.org/)
- [Vuex](https://vuex.vuejs.org/) (state management)
- [Electron](https://www.electronjs.org/) (desktop apps ftw)
- [Tailwind CSS](https://tailwindcss.com/) (UI framework)
- Libraries
- [Marked](https://marked.js.org/) (convert markdown to html)
- [CodeMirror](https://codemirror.net/) (builing your own editor is hard)
- [Hotkeys](https://github.com/jaywcjlove/hotkeys/) (makes keyboard shortcuts easy)
### Feature Set
- 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
- Dracula
- Gruvbox
- Monokai
- 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