https://github.com/neosh11/tldraw-web-component
Library enabling the use of tldraw on multiple frameworks.
https://github.com/neosh11/tldraw-web-component
Last synced: 4 months ago
JSON representation
Library enabling the use of tldraw on multiple frameworks.
- Host: GitHub
- URL: https://github.com/neosh11/tldraw-web-component
- Owner: neosh11
- Created: 2025-01-14T03:59:59.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-01-29T00:51:11.000Z (5 months ago)
- Last Synced: 2025-02-24T05:55:48.247Z (4 months ago)
- Language: TypeScript
- Size: 2.95 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - tldraw-web-component - Make [tldraw](https://github.com/tldraw/tldraw) work with frameworks other than React; Made primarily to work with Angular. (Table of contents / Angular)
- fucking-awesome-angular - tldraw-web-component - Make <b><code> 40397⭐</code></b> <b><code> 2553🍴</code></b> [tldraw](https://github.com/tldraw/tldraw)) work with frameworks other than React; Made primarily to work with Angular. (Table of contents / Angular)
README
[](https://badge.fury.io/js/tldraw-web-component)
[](https://github.com/prettier/prettier)
# tldraw web component
> Make tldraw work with frameworks other than React;
## Getting Started
Install with
```
npm i tldraw-web-component
```
# Usage
You need to simply include the esm module in order to use the webcomponent.
```js
import 'tldraw-web-component'
```
This allows using the webcomponent in your html template.
```html
Pure HTML + TlDraw Web Component
function multiplayerAssets() {
return {
async upload(_asset, file) {
const id = Math.random().toString(36).substr(2, 9); // Generate a unique ID
const objectName = `${id}-${file.name}`;
const url = `${'http://localhost:5858/uploads'}/${encodeURIComponent(objectName)}`;
const response = await fetch(url, {
method: 'PUT',
body: file,
});
if (!response.ok) {
throw new Error(`Failed to upload asset: ${response.statusText}`);
}
return url;
},
resolve(asset) {
return asset.props.src;
},
};
}
```
## Usage with angular
Check `examples/angular`
## Functions available with tldraw-sync-web-component
**Sync Attr**
| Name | type | Desciption |
| -------- | ------- | ------- |
| `room-id` | string | The id of the room |
| `server-uri` | string | The uri of the tldraw/sync server. |
| `query-params` | json | A json containing the query params to be sent when making the connection |
| `multiplayer-assets-func` | function | A function in window / global scope. |
**Draw Attr**
| Name | type | Desciption |
| -------- | ------- | ------- |
| `auto-focus` | boolean | if tldraw should be in focus when component loads |
| `force-mobile` | boolean | Whether to always should the mobile breakpoints |
| `hide-ui` | boolean | Whether to hide the UI |
| `infer-dark-mode` | boolean | Whether to infer dark mode from the user's OS. Defaults to false. |
| `on-mount` | function | Called when the editor has mounted. |
| `initial-state` | string | The editor's initial state (usually the id of the first active tool). |
| `license-key` | string | The license key. |
| `max-asset-size` | number | The maximum size (in bytes) of an asset. Assets larger than this will be rejected. Defaults to 10mb (10 * 1024 * 1024). |
| `max-image-dimension` | number | The maximum dimension (width or height) of an image. Images larger than this will be rescaled to fit. Defaults to infinity. |
| `get-user-func` | function | Returns an object with shape {id?: string; name?: string; color?: string; colorScheme?: "dark" \| "light" \| "system" \| undefined; } \| undefined; |
| `make-real-func` | function | Optional function that returns a promise (developerPrompt: any, image: any, messages: any) => Promise |
## Contributing
Please create an issue when you make a PR.
1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Add your changes: `git add .`
4. Commit your changes: `git commit -am 'Add some feature'`
5. Push to the branch: `git push origin my-new-feature`
6. Submit a pull request :sunglasses:
## Credits
tldraw;
https://github.com/tldraw/tldraw
## License
[tldraw license](https://github.com/tldraw/tldraw/blob/main/LICENSE.md)