Skip to main content
  1. Posts/

Use tldraw in Vite

·169 words·1 min· ·
Web Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. Is consists of two major parts:

  • A dev server that provides rich feature enhancements over native ES modules, for example extremly fast Hot Module Replacement(HMR).
  • A build command that bundles your code with Rollup, pre-configured to output highly optimized static assets for production.

tldraw is a library for creating infinite canvas experiences in React.

To scaffold a Vite+React project, run:

npm create vite@latest tldraw -- --template react-swc-ts
cd tldraw
npm install
npm run dev

Install tldraw library, run:

npm install tldraw

Import fonts and CSS for tldraw, edit App.css:

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap");
@import url("tldraw/tldraw.css");

body {
  font-family: "Inter";
}

Render the tldraw component, edit App.tsx:

import { Tldraw } from 'tldraw'
import './App.css'

function App() {
    return (
        <div style={{ position: 'fixed', inset: 0 }}>
            <Tldraw />
        </div>
    )
}

export default App

You may run npm run build to build the app, and run npm run preview to test it.

Related

Build Emacs From Source
·201 words·1 min
Emacs Linux WSL