Abhimanyu

Notedown — Embed computation and drawing canvas in your markdown notes

1
•
A markdown based note-taking app with useful embeddings like editable and executable code blocks, tldraw whiteboards, code sandboxes, syntax highlighted code snippets. All your notes are stored locally in your browser.

Add a comment

Replies
Best
Abhimanyu
Maker
đź“Ś
Why yet another note-taking app? I have been a user of markdown based note-taking apps like obsidian for quite some time. What I found lacking in such apps was that they were too text heavy. My notes don't just contain text; they are usually a mixture of text, some images, code and diagrams. Therefore, a typical note I write is composed of a markdown text file with some images, link to some github gists, code sandboxes and screenshots of some hand-drawn diagrams. As a result, My note-taking experience was divided across several apps - I used to write markdown using obsidian, draw diagrams using tldraw and store their screenshots, write code in a Codesandbox and store it in markdown using a link. Aside from that if you have ever read Eloquent Javascript , you'll know how much being able to edit and run code right inside the browser while studying some programming concept helps in understanding. I wanted that type of experience from my note-taking app, where I or the reader of my note can tinker with code written in the note to get a grasp of the concepts quickly. How Notedown solves this In Notedown, you can: - Write notes using a web-based markdown editor. - The markdown code blocks get converted to a full fledged code-editor with syntax highlighting, autocompletion, linting and vim mode. - The code inside the code blocks can be edited and run right inside the browser. You can execute javascript, typescript, rust, python and go code inside these code blocks. - Embed a tldraw component right inside your markdown. The diagrams you draw will be converted to a crisp SVG on preview. - Embed a code sandbox inside your markdown notes with a code-editor and web preview. If you have read any of Josh Comeau's blogs, you'll know what I'm talking about. - Easily add Images from local filesystem. The thing I love above obsidian is that it's a local first app. I have emulated that philosophy in Notedown too. It is an entirely local-first app i.e. all your markdown text, images, tldraw drawings, code-sandboxes aren't uploaded anywhere unless you choose to. Everything is stored in the Index storage of your browser. You only need to upload a note if you want to sync it across devices. The note you upload remains in private mode by default, which means only you can view the note using the note's URL on any browser or device. You can choose to publish a note if you want to get a publicly shareable link for your note which can be accessed by everyone. All your notes will be organized using the tags you provide in the frontmatter of the markdown. The tags will loosely act as a folder giving a clean overview of note-collection. Because of the local-first nature of the app, searching through your notes is lightning fast. The app is entirely open-source: Nextjs App - https://github.com/Abhimanyu08/N... Remote Code execution server - https://github.com/Abhimanyu08/N... I'll add instructions to set it up locally shortly. You can file bugs on the github repo (https://github.com/Abhimanyu08/N...) or message them to me on twitter (https://twitter.com/A_Bhimany_u) or telegram (a_bhiman) Roadmap ahead - Support more languages - Add multiple themes and allow a user greater control over the looks of his/her notebook. - Talk to your notes using GPT along with semantic search. - Add text-to-diagram support using mermaid.js