Skip to content
View drawnotes's full-sized avatar

Block or report drawnotes

Block user

Prevent this user from interacting with your repositories and sending you notifications. Learn more about blocking users.

You must be logged in to block users.

Maximum 250 characters. Please don't include any personal information such as legal names or email addresses. Markdown supported. This note will be visible to only you.
Report abuse

Contact GitHub support about this user’s behavior. Learn more about reporting abuse.

Report abuse
drawnotes/README.md

Draw Notes is a Next.js based application for visual and text-based notes.

Monaco Editor is used for Markdown and source code files, while Excalidraw powers diagram sketching.

Excalidraw drawings are stored inside a standard SVG file as base64-encoded JSON metadata. This allows them to be previewed and used as normal, but means that only SVGs exported by Excalidraw can be opened in Excalidraw. An SVG import solution is in development

Draw Notes is 100% stateless and all application data is only stored client-side. The virtual file system is persisted to IndexedDB, application state is saved to localStorage and user details are stored in an encrypted cookie

GitHub is currently the only integrated storage solution, with Git operations done entirely in browser by isomorphic-git

Bonus

GeoJSON files can be previewed and will be rendered to canvas with deck.gl

CSV files can be previewed with basic filtering and sorting provided by react-table

Running Locally

First, run the development server:

npm run dev
# or
yarn dev

Open http://localhost:3000

Using Docker

  1. Install Docker on your machine.
  2. Build your container: docker build -t nextjs-docker ..
  3. Run your container: docker run -p 3000:3000 nextjs-docker.

You can view your images created with docker images.

Deploy to Vercel:

Deploy with Vercel

Popular repositories Loading

  1. drawnotes-sample-files drawnotes-sample-files Public

    JavaScript

  2. drawnotes drawnotes Public

    Save excalidraw diagrams and markdown notes to github

    TypeScript