Tldraw/apps/examples/src/examples/custom-config/README.md

---
title: Custom shape and tool
component: ./CustomConfigExample.tsx
category: shapes/tools
priority: 3
---

Create custom shapes / tools

---

The card shape (select ⚫️ in the toolbar) is a custom shape - but also just a normal react component.
add descriptions to examples (#2375) Adds descriptions to examples. ![Kapture 2023-12-22 at 17 08 32](https://github.com/tldraw/tldraw/assets/1489520/d78657cf-b3c3-4160-b58b-7c08ed27823d) They show as a list on the index page, and on individual examples they show in a three-js style sidebar. For now, this is disabled completely on mobile. Examples can still be opened in 'standalone' mode to get rid of the sidebar. Note: the 'view code' link won't work until after these changes are merged. There's a small impact on authoring examples: each one needs to live in a folder with a README.md. At a minimum, the readme needs to look like this: ```md --- title: My Example component: ./MyExample.tsx --- Here is a 1-liner about my example ``` Optionally, you can: - Add `hide: true` to the frontmatter to remove the example from the list (you can skip the description this way) - Add `order: 3` to control the order in which the example appears. They're alphabetical otherwise - Add some more description or links to docs below a `---`. This won't show in the listing, but will be visible on GitHub and on the example page itself. As a follow-up, I'd like to add an 'Open in CodeSandbox' link to each example. These won't work until we've made a release with these examples (as our special examples codesandbox is tied to our release process) but the code is there & ready to go! Have a play, let me know what you think! ### Change Type - [x] `documentation` — Changes to the documentation only[^2] --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com> 2023-12-27 17:17:18 +00:00			`---`
Custom shape examples (#2994) This PR: - adds a simple custom shape example - adds an interactive shape example - updates editable shape example closes TLD-2118 - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - adds a simple custom shape example - adds an interactive shape example - updates editable shape example --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com> 2024-03-02 20:18:31 +00:00			`title: Custom shape and tool`
add descriptions to examples (#2375) Adds descriptions to examples. ![Kapture 2023-12-22 at 17 08 32](https://github.com/tldraw/tldraw/assets/1489520/d78657cf-b3c3-4160-b58b-7c08ed27823d) They show as a list on the index page, and on individual examples they show in a three-js style sidebar. For now, this is disabled completely on mobile. Examples can still be opened in 'standalone' mode to get rid of the sidebar. Note: the 'view code' link won't work until after these changes are merged. There's a small impact on authoring examples: each one needs to live in a folder with a README.md. At a minimum, the readme needs to look like this: ```md --- title: My Example component: ./MyExample.tsx --- Here is a 1-liner about my example ``` Optionally, you can: - Add `hide: true` to the frontmatter to remove the example from the list (you can skip the description this way) - Add `order: 3` to control the order in which the example appears. They're alphabetical otherwise - Add some more description or links to docs below a `---`. This won't show in the listing, but will be visible on GitHub and on the example page itself. As a follow-up, I'd like to add an 'Open in CodeSandbox' link to each example. These won't work until we've made a release with these examples (as our special examples codesandbox is tied to our release process) but the code is there & ready to go! Have a play, let me know what you think! ### Change Type - [x] `documentation` — Changes to the documentation only[^2] --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com> 2023-12-27 17:17:18 +00:00			`component: ./CustomConfigExample.tsx`
Grouping examples into categories (#2585) This PR adds collapsible groups to the examples app. it's not finished, but I'd like a review before continuing as I've made a few decisions I'd like feedback on. I'd like to make a separate issue for abstracting the accordion component, as I wasn't sure how I would do it and I thought it would be best to prioritise the functionality first. Especially considering there are more pressing issues to be getting on with. ### Change Type - [ ] `patch` — Bug fix - [ ] `minor` — New feature - [ ] `major` — Breaking change - [ ] `dependencies` — Changes to package dependencies[^1] - [x] `documentation` — Changes to the documentation only[^2] - [ ] `tests` — Changes to any test code only[^2] - [ ] `internal` — Any other changes that don't affect the published package[^2] - [ ] I don't know [^1]: publishes a `patch` release, for devDependencies use `internal` [^2]: will not publish a new version ### Release Notes - Add collapsible categories to the examples app --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com> 2024-01-29 10:04:41 +00:00			`category: shapes/tools`
Custom shape examples (#2994) This PR: - adds a simple custom shape example - adds an interactive shape example - updates editable shape example closes TLD-2118 - [x] `documentation` — Changes to the documentation only[^2] ### Release Notes - adds a simple custom shape example - adds an interactive shape example - updates editable shape example --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com> 2024-03-02 20:18:31 +00:00			`priority: 3`
add descriptions to examples (#2375) Adds descriptions to examples. ![Kapture 2023-12-22 at 17 08 32](https://github.com/tldraw/tldraw/assets/1489520/d78657cf-b3c3-4160-b58b-7c08ed27823d) They show as a list on the index page, and on individual examples they show in a three-js style sidebar. For now, this is disabled completely on mobile. Examples can still be opened in 'standalone' mode to get rid of the sidebar. Note: the 'view code' link won't work until after these changes are merged. There's a small impact on authoring examples: each one needs to live in a folder with a README.md. At a minimum, the readme needs to look like this: ```md --- title: My Example component: ./MyExample.tsx --- Here is a 1-liner about my example ``` Optionally, you can: - Add `hide: true` to the frontmatter to remove the example from the list (you can skip the description this way) - Add `order: 3` to control the order in which the example appears. They're alphabetical otherwise - Add some more description or links to docs below a `---`. This won't show in the listing, but will be visible on GitHub and on the example page itself. As a follow-up, I'd like to add an 'Open in CodeSandbox' link to each example. These won't work until we've made a release with these examples (as our special examples codesandbox is tied to our release process) but the code is there & ready to go! Have a play, let me know what you think! ### Change Type - [x] `documentation` — Changes to the documentation only[^2] --------- Co-authored-by: Steve Ruiz <steveruizok@gmail.com> 2023-12-27 17:17:18 +00:00			`---`

			`Create custom shapes / tools`

			`---`

			`The card shape (select ⚫️ in the toolbar) is a custom shape - but also just a normal react component.`