πŸ‘¨β€πŸ’»πŸ‘©β€πŸ’» Write Markdown. Together.

Overview

πŸ‘¨β€πŸ’» πŸ‘©β€πŸ’» LetsMarkdown.com

Fast, minimal web editor that makes markdown editing collaborative and accessible to everyone.


LetsMarkdown.com

Motivation

> I want to edit markdown files with my friends, but sending/resending files, changing viewing access, version control, and previewing are just too much work.

> πŸ’‘ why not create a google doc for collaborative markdown editing, without having to log into Google, change view/edit access, worry about previewing the file, etc?

> VoilΓ , after hours of laborious coding, LetsMarkdown.com is born!

Features

  • Live collaborative markdown editing and preview
  • VSCode-like editor with support for command palette (syntax highlighting, autocomplete, editor themes...)
  • Minimal setup with no login required - say goodbye to malicious trackers and privacy invasions
  • Efficient backend built with Rust and WebAssembly
  • Dark mode (duh)
  • Emoji support with shortcuts enabled
  • (Upcoming) cursors tracking, synced scrolling, subscript/footnote/insert support, and more

Tech Stack

  • Frontend: React.js (TypeSript), Vite.js, Chakra UI
    • Editor & markdown preview: Monaco, mardown-it.js, highlight.js
  • Backend: Rust, WebAssembly, Node.js
  • Deployment & hosting: Docker, DigitalOcean
  • CI/CD: Github Action
  • Formatting: Prettier, Rustfmt
  • Design & prototyping: Figma

Development Info

This application is built using a backend operational transformation control server written in Rust (based on Rustpad), and a frontend written in TypeScript using React.js.

The backend server supports real-time collaborative editing sessions, and the frontend offers a collaborative text editor with built-in markdown syntax highlighting and auto-completion. These parts of the application are connected via WebSocket communication.

For markdown previewing, I used the markdown-it.js library to dynamically render the markdown file. To style the markdown file, I also created a custom markdown.css stylesheet.

To develop this application locally, you need to:

First, install Rust, wasm-pack, and Node.js. Verify your installation with:

rustup -V && wasm-pack -V && npm -v

Then, build the WebAssembly part of the app:

wasm-pack build --target web letsmarkdown-wasm

After that, install the dependencies for the React application:

npm install

Next, you can compile and run the backend web server:

cargo run

While the backend is running, open another shell and run the following command to start the frontend dev server.

npm run dev

This command will open a browser window to http://localhost:3000, with hot reloading enabled on saved changes.

Deployment

LetsMarkdown.com is distributed as a single 12 MB Docker image, which is built automatically from the Dockerfile in this repository. You can pull the latest version of this image from Docker Hub. It has multi-platform support for linux/amd64 and linux/arm64.

docker pull cveinnt/letsmarkdown

(You can also manually build this image with docker build -t rustpad . in the project root directory.) To run locally, execute the following command, then open http://localhost:3030 in your browser.

docker run --rm -dp 3030:3030 cveinnt/letsmarkdown

I deploy a public instance of this image with DigitalOcean App Platform.

Contributing

This project is still in a very early phase. If you're interested in adding new features or fixing bugs, please reach out to me by creating a GitHub issue!

I plan to integrate this repository continuously, and the code base already accounts for things like code style (Prettier, Rustfmt) and build success (Docker). The current state of the main branch is continuously deployed to the production web server at LetsMarkdown.com.

Credits

LetsMarkdown.com is inspired by composing.studio, which is based on Rustpad.


All code is licensed under the MIT license.
Comments
  • Multi-arch does not seem to be supported

    Multi-arch does not seem to be supported

    Hello!

    The README mentions that the Docker image supports multi-arch, but that does not appear to be the case here?

    https://hub.docker.com/r/cveinnt/letsmarkdown/tags

    opened by agneevX 4
  • Font size of code, in headings, and border box.

    Font size of code, in headings, and border box.

    See https://letsmarkdown.com/spurious-kick-1370

    The code tags should follow the font-height for the heading element they are contained in, but they are all exactly font-height: 12px;. I think changing this to a relative value, like font-height: 0.9em; could be sufficient to solve this issue in https://github.com/Cveinnt/LetsMarkdown.com/blob/d53114d36ac265989301c12a52f8a5e72dc25e30/src/components/markdown.css#L109

    Moreover, if you browse <insert random MDN docs> as reference, you will see that they are using a font that has an Ascender (space above Capsize, i.e. font height) that balances out with the Descender (space below baseline, i.e. below font).[^1] This leads to the box around the text being more "center" than currently, where there appears to be less space above the font than below it. I'm sure you could find a suitable font for this.

    Screenshot of the wrong font-height and missing Ascender, on current Firefox

    screenshot

    [^1]: Terminology from https://seek-oss.github.io/capsize/

    opened by WorldSEnder 2
  • Implement XSS prevention measures

    Implement XSS prevention measures

    Please consider adding XSS countermeasures for this product. It's possible to run an arbitrary JavaScript code.

    To reproduce

    1. go to https://letsmarkdown.com/
    2. Get the generated URL ( https://letsmarkdown.com/pink-things-6832 )
    3. Add the following details
    <img src=1 onerror="console.log(top.document.body.innerHTML='Unexpected_Page')">
    
    1. Ask people to access https://letsmarkdown.com/pink-things-6832

    Suggested Fix

    Consider disabling HTML feature on src/components/Score.tsx, or use the sanitizer package while HTML is turned on.

    https://github.com/Cveinnt/LetsMarkdown.com/blob/d88c75b132e60733a5bc3eae43cf72d82eaafa4d/src/components/Score.tsx#L30

    I assume HTML tags are not required for the most of the time.

    Reference: https://github.com/markdown-it/markdown-it/blob/master/docs/security.md

    opened by stypr 1
  • Websockets support needs to be enabled if hosted behind a reverse proxy

    Websockets support needs to be enabled if hosted behind a reverse proxy

    Hello,

    Thanks for making this, it's very useful! I was hosting the editor behind a Nginx reverse proxy using the Nginx Proxy Manager which I believe is pretty common amongst self-hosting enthusiasts and found out that the "Websockets Support" option was required to be enabled if not you would not be able to connect to the server to save your notes for collaboration. Just mentioning it here in case someone else faces the same problem.

    opened by MarseyLivesMatter 1
  • A Few Questions

    A Few Questions

    I'm not sure if I am just a newbie, or if there are a few features missing (I understand it's under development and it's early)

    My main question is that, I deployed on docker using the instructions, how do I change the volumes so I can change the path at the top? (Seems to default to documents>randomlygeneratedname) Or is this by design? Do I have to install on bare metal to be able to save these files to the system? Not quite sure how it all works.

    Assuming there is nothing saved in a database or on the system, and its just a editor to view and collaborate in the browser, then I think an ability to upload a markdown file to continue editing (although you can copy and paste, so this may not be needed) as well as a way to export the document (again, can copy and paste, but a button to import/export would be nice).

    Overall, I really like the UI and it's simplicity. Looking forward to this projects future.

    opened by LordZeuss 0
  • Docker persistent storage

    Docker persistent storage

    I guess when using https://<url>/<file-name> we create a new file to be edited. I do want the files to be stored persistently. How can I achieve this in docker? I can't even use docker exec -it <container-name> sh (or any other shell) to explore the directory structure. tl;dr: what folder to mount using docker, to have possible persistent storage? (maybe include it in the README.md)

    opened by SoulEater45 1
Owner
Vincent
Cal 🐻. I like ml, art, and philosophy.
Vincent
CRUD (Create, Read, Update, Delete) Recipe App with React. Project was developed together with DSC MMU during JavaScript Week 2021.

react-crud-recipe-app CRUD (Create, Read, Update, Delete) Recipe App with React. Project was developed together with DSC MMU during JavaScript Week 20

MUHAMMAD WAFIYUDDIN BIN ROHANIZAM 4 Aug 30, 2022
Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack. "Write once, deploy everywhere" concept in practice.

CrossBuilder Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging. Redux states are sync

Mihail Diordiev 488 Sep 8, 2022
Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack. "Write once, deploy everywhere" concept in practice.

CrossBuilder Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging. Redux states are sync

Mihail Diordiev 488 Sep 8, 2022
πŸ’… Micro-library to write stylesheets with a non-opinionated approach, free of dependencies, and in the easiest way possible.

react-native-styl is a micro-library for React Native developers whose goal is to write stylesheets with a non-opinionated library, free of dependenci

Danilo Woznica 38 Oct 27, 2022
How to write your own JS/TS codemods, with comments and resources

simple-codemod-script This is an example of how to write your own codemod scripts using babel and recast. There are comments throughout the code expla

Lily Scott 9 Feb 9, 2022
A plugin enables you to import a Markdown file as various formats on your vite project

vite-plugin-mdoc A plugin enables you to import a Markdown file as various forma

3lang 3 May 18, 2022
Store your notes in this app using Markdown!

Marknotes Summary ?? About ??️ Layout ?? Technologies ?? Difficulties ?? What's next ?? About Marknotes is an application that allows users to save th

Igor de Almeida 2 Dec 29, 2021
A developer blog starter for 2021 (Next.js + React + TypeScript + Markdown + syntax highlighting)

Devii A developer blog starter for 2020. Next.js React TypeScript Markdown syntax highlighting SEO RSS generation if you're happy and you know it, sta

Colin McDonnell 460 Nov 23, 2022
A simple way to write re-usable features with React + EffectorA simple way to write re-usable features with React + Effector

Effector Factorio The simplest way to write re-usable features with React + Effector Install npm install effector-factorio Why this? People became to

Anton Kosykh 36 Dec 6, 2022
✏️ A very simple but useful Markdown Previewer and Markdown Editor with CodeMirror, Markedjs, and Create-react-app

Markdown Editor A very simple but useful Markdown Previewer and Markdown Editor with CodeMirror, Markedjs and Create-react-app Preview Markdown Editor

Lam Pham 29 Jul 1, 2022
React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub Markdown style.

React Markdown Preview React component preview markdown text in web browser. The minimal amount of CSS to replicate the GitHub Markdown style. The cur

uiw 108 Nov 29, 2022
Markdown-editor - React markdown editor with preview

React Markdown Editor with preview How cool would it be to have a markdown edito

Alvaro Castillo 2 Jan 11, 2022
Use the full power of React and GSAP together

react-gsap-enhancer Demos Why? How it works? Usage API A React component enhancer for applying GSAP animations on components without side effects. For

AndrΓ‘s PolgΓ‘r 721 Nov 5, 2022
A simple javascript utility for conditionally joining classNames together

Classnames A simple JavaScript utility for conditionally joining classNames together. Install with npm, Bower, or Yarn: # via npm npm install classnam

Jed Watson 16.1k Dec 2, 2022
A simple javascript utility for conditionally joining classNames together

Classnames A simple JavaScript utility for conditionally joining classNames together. Install with npm, Bower, or Yarn: # via npm npm install classnam

Jed Watson 16.1k Dec 3, 2022
Trilha React Native - NLW Together (NLW 6) - Rocketseat

?? Technologies This project was developed using the following technologies: React Native Expo ?? Getting started Clone the project and access the fol

Jeferson Antonio Mesquita 3 Aug 18, 2021
Project of Next Level Week Together - Q&A rooms

Letmeask Project of Next Level Week Together - Q&A rooms Features This app features all the latest tools and practices in web development! βš›οΈ React Js

Arthur Mattos 1 Oct 28, 2022
An "awesome" type curated list of how to use React Native and Meteor together

Awesome React Native Meteor An "awesome" type curated list of how to use React Native and Meteor together. Based on Awesome React Native which was bas

Meteor Factory 153 Oct 23, 2022
Black Dashboard React is a beautiful Bootstrap 4, Reacstrap and React (create-react-app) Admin Dashboard with a huge number of components built to fit together and look amazing.

Black Dashboard React Black Dashboard React is a beautiful Bootstrap 4, Reacstrap and React (create-react-app) Admin Dashboard with a huge number of c

Creative Tim 396 Dec 7, 2022
Gameplay is a React Native App that I built in the Next Level Week Together, that helps you with your gaming appointments!

Gameplay is a React Native App that I built in the Next Level Week Together, that helps you with your gaming appointments!

Mateus R Sitta 5 Feb 28, 2022