a5e6ae87fe
Following on from #2686, this PR replaces the introduction page with a Quick Start guide. Next Steps: - Better UX around the code blocks, throughout the site. A copy button would be great. - Collapsible extra info on the release version and rendering an inline component - Maybe remove the embed - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - Add a quick start guide --------- Co-authored-by: Mime Čuvalo <mimecuvalo@gmail.com>
84 lines
2.6 KiB
Text
84 lines
2.6 KiB
Text
---
|
|
title: Quick Start
|
|
status: published
|
|
author: steveruizok
|
|
date: 3/22/2023
|
|
order: 0
|
|
---
|
|
|
|
<h2>Add a tldraw canvas to your React app in just 5 minutes.</h2>
|
|
|
|
The tldraw SDK provides a really simple way to craft infinite canvas experiences for the web. It's perfect for collaborative applications, productivity tools, interfacing with multi-modal AI, and more.
|
|
|
|
By the end of this guide you will have made something that looks like this:
|
|
|
|
<Embed className="article__embed--quickstart" src="https://vite-template-five.vercel.app/" />
|
|
|
|
|
|
Follow the steps below to make your own version of it, or [clone the repo](https://github.com/tldraw/vite-template) to skip to the end.
|
|
|
|
<hr />
|
|
<ol className="ordered-list__quickstart">
|
|
<li>
|
|
### Installation
|
|
|
|
- Set up a React project however you normally do. [We recommend Vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project).
|
|
- Install the tldraw library using this command:
|
|
|
|
```bash
|
|
npm install @tldraw/tldraw@beta
|
|
```
|
|
</li>
|
|
<li>
|
|
### Import Styles
|
|
<br />
|
|
To import fonts and CSS for tldraw:
|
|
|
|
- Create or edit a css file called `index.css`
|
|
- Copy and paste this into the file:
|
|
```CSS
|
|
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Roboto+Mono:wght@400;700&display=swap");
|
|
@import url("@tldraw/tldraw/tldraw.css");
|
|
|
|
body {
|
|
font-family: "Inter";
|
|
}
|
|
```
|
|
</li>
|
|
<li>
|
|
### Render Tldraw Component
|
|
<br />
|
|
To render the Tldraw component
|
|
|
|
- Import the `<Tldraw />` component from `@tldraw/tldraw`
|
|
- Import the `index.css` CSS file from earlier
|
|
- Wrap the Tldraw component in a `<div>` element with the style attribute set to: `{ position: 'fixed', inset: 0 }`
|
|
|
|
<p className="">This will render a full screen canvas:</p>
|
|
|
|
```javascript
|
|
import { Tldraw } from "@tldraw/tldraw";
|
|
import "./index.css";
|
|
|
|
export default function App() {
|
|
return (
|
|
<div style={{ position: 'fixed', inset: 0 }}>
|
|
<Tldraw />
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
</li>
|
|
</ol>
|
|
|
|
<hr />
|
|
|
|
### Next Steps
|
|
|
|
You did it! Now that you have your canvas working, you may be wondering: what next? You can try:
|
|
|
|
- Giving the editor a makeover by [customizing the UI](/docs/user-interface)
|
|
- Adding your own [shapes](/docs/shapes) and [tools](/docs/tools)
|
|
- Providing collaboration using [multiplayer](https://github.com/tldraw/tldraw-yjs-example)
|
|
|
|
We provide the above examples and more in our [examples section](/examples/basic/develop). Go build something creative and please do share it with us in our [#show-and-tell](https://discord.com/invite/SBBEVCA4PG) channel on Discord!
|