An open API service indexing awesome lists of open source software.

https://github.com/elixpo/lixsketch

WYSIWYG type canvas for advance sketching and smart editing with AI support in Beta
https://github.com/elixpo/lixsketch

canvas drawing editor roughjs wysiwyg

Last synced: 2 months ago
JSON representation

WYSIWYG type canvas for advance sketching and smart editing with AI support in Beta

Awesome Lists containing this project

README

          

# LixSketch - Built by a Genz 🚀

image

> It was one of the most favourite projects of mine while development. It took me 11 months to come to the stage where I can write the README and product my mvp - [LixSketch](https://sketch.elixpo.com)

LixSketch Logo

An open-source freemium platform for collaborative canvas — technical presentations, modelling, wireframes, and more.

[![GitHub Stars](https://img.shields.io/github/stars/elixpo/lixsketch?style=for-the-badge&logo=github&color=5B57D1&labelColor=1a1a2e)](https://github.com/elixpo/lixsketch/stargazers)
[![GitHub Forks](https://img.shields.io/github/forks/elixpo/lixsketch?style=for-the-badge&logo=github&color=8B88E8&labelColor=1a1a2e)](https://github.com/elixpo/lixsketch/network/members)
[![GitHub Issues](https://img.shields.io/github/issues/elixpo/lixsketch?style=for-the-badge&logo=github&color=c873e4&labelColor=1a1a2e)](https://github.com/elixpo/lixsketch/issues)
[![License](https://img.shields.io/github/license/elixpo/lixsketch?style=for-the-badge&color=4A90D9&labelColor=1a1a2e)](./LICENSE)

[![Website](https://img.shields.io/badge/Website-sketch.elixpo.com-5B57D1?style=flat-square&logo=googlechrome&logoColor=white)](https://sketch.elixpo.com)
[![Docs](https://img.shields.io/badge/Docs-LixScript-8B88E8?style=flat-square&logo=bookstack&logoColor=white)](https://sketch.elixpo.com/docs)
[![npm](https://img.shields.io/npm/v/@elixpo/lixsketch?style=flat-square&logo=npm&logoColor=white&color=CB3837)](https://www.npmjs.com/package/@elixpo/lixsketch)
[![VS Code](https://img.shields.io/badge/VS%20Code-Extension-007ACC?style=flat-square&logo=visualstudiocode&logoColor=white)](https://marketplace.visualstudio.com/items?itemName=elixpo.lixsketch)

### LixSketch is an open source freemium platfor for collaborative canvas for technical presentation / modelling on web + IDE + pwa (under development)

og-image

## Why LixSketch?

LixSketch offers technical / professional proficiency in quick canvases used for any technical interview, presentation, workshop, or classroom in a collaborative fashion — sharable with anyone at any time in a matter of a click.

image

## What Makes LixSketch Stand Out

| | Feature |
|---|---|
| 🔓 | **No login required** — start drawing instantly as a guest |
| 🎁 | **Generous freemium model** — powerful tools at zero cost |
| 📜 | **LixScript** — our own [diagram scripting language](https://sketch.elixpo.com/docs) |
| 🧩 | **All-in-one workspace** — combines Excalidraw + TLDraw + Eraser.io |
| 🛡️ | **E2E encrypted sharing** — your data stays yours |
| 📂 | **Open Source** — MIT licensed, built in public |
| ⚡ | **Fast & free** — generous guest mode, no paywall |

image

## Use LixSketch Everywhere

| | Platform | Description |
|---|---|---|
| 🌐 | **[Web App](https://sketch.elixpo.com)** | Full collaborative canvas in the browser |
| 🖥️ | **[VS Code Extension](https://marketplace.visualstudio.com/items?itemName=elixpo.lixsketch)** | Draw diagrams right inside your editor — open any `.lixsketch` file |
| 📦 | **[NPM Package](https://www.npmjs.com/package/@elixpo/lixsketch)** | Embed the engine in your own app with `npm install @elixpo/lixsketch` |

### VS Code Extension

Draw diagrams, sketch ideas, and build visual documents — without leaving your editor. Just create a `.lixsketch` file and start drawing.

```
ext install elixpo.lixsketch
```

LixSketch VS Code Extension

### NPM Package

Build your own whiteboard, diagramming tool, or collaborative canvas with a few lines of code.

```bash
npm install @elixpo/lixsketch
```

```javascript
import { createSketchEngine, TOOLS } from '@elixpo/lixsketch';

const engine = createSketchEngine(svgElement);
await engine.init();
engine.setActiveTool(TOOLS.RECTANGLE);
```

Full API docs and examples in the [engine README](./packages/lixsketch/README.md).

## Tech Stack

![Next.js](https://img.shields.io/badge/Next.js-000?style=flat-square&logo=nextdotjs&logoColor=white)
![RoughJS](https://img.shields.io/badge/RoughJS-333?style=flat-square&logo=javascript&logoColor=F7DF1E)
![Cloudflare](https://img.shields.io/badge/Cloudflare-F38020?style=flat-square&logo=cloudflare&logoColor=white)
![D1](https://img.shields.io/badge/D1_Database-F38020?style=flat-square&logo=cloudflare&logoColor=white)
![WebSocket](https://img.shields.io/badge/WebSocket-010101?style=flat-square&logo=socket.io&logoColor=white)
![Zustand](https://img.shields.io/badge/Zustand-443E38?style=flat-square&logo=react&logoColor=white)

## Documentation

We have a dedicated section for our [LixSketch Docs](https://sketch.elixpo.com/docs) with a rich definition on how we implemented our architecture and product in the open source with security and transparency.

image

## Contributing

This is an open source project! If you find bugs on the platform, please let us know from the [Issues Tab](https://github.com/elixpo/lixsketch/issues). We'd love to solve them for a smooth user experience.

image

## Star History





Star History Chart

---

### Made with ❤️ by [Elixpo](https://elixpo.com) | [GitHub](https://github.com/elixpo/lixsketch)