You can also have markup after.
\n\n```\n\nPlease note key differences:\n\n- tool does not need `component={MyComponent}` any more\n\n- tool has `let:props`, and your component has `{...props}`.\n This allows Atelier to configure properties even if your component is \"burried\" into the template\n\n- tool has `let:handleEvent`, and your component binds it to specific event.\n This allows Atelier to receive any event you'd like.\n\nIf you want to tweak properties, don't forget to initialize them on `Tool`: otherwise Atelier will not generates the corresponding controls.\n\n---\n\n## Setup and teardown code\n\nIf you need to run code _every time your tool loads_, you can use `setup` function:\n\n```js\n {\n return newProps\n }}\n/>\n```\n\nThe `setup` function:\n\n- could either be synchronous or asynchronous.\n\n- receives a single object parameter, with the `name` and `props` keys (the ones you passed to ``)\n- **can return** new `props` for your component.\n If `setup()` returns nothing, `props` from the markup will be used.\n\nYou can also use `teardown ` function:\n\n```js\n {}}\n/>\n```\n\nThe `teardown` function:\n\n- could either be synchronous or asynchronous.\n\n- receives the component `name` (the one you passed to ``)\n\n---\n\n## Tool boxes\n\nYou can add as many `` in the same file as you want.\nBut there may be a lot of code duplication!\n\n`` can solve this issue:\n\n```js\n\n \n \n\n```\n\nThis helps you easily test variations of the same component.\n\nImportant highlights:\n\n- a tool's full name is its tool box's name + its own name. In the example above: `My Awesome Component / Primary`\n\n- a tool box supports _exactly the same properties_ as tool, with some specificities:\n\n - `name` are concatenated, as explained above.\n\n - tool's `component` override tool box.\n\n - `props` are merged.\n\n - `events` are merged.\n\n - tool box's `setup()` runs _before_ the tool's `setup()`. The result of the primer becomes `props` parameter of the later.\n\n - tool box's `teardown()` runs _after_ the tool's `teardown()`.\n\n- tool box _do not support_ templates.\n\n---\n\n## Examples\n\nNow that you know everything, you may want some real examples.\n\nYou'll find some in Atelier's [UI tests][ui-tests]\n\n[svelte]: https://svelte.dev\n[vite-plugin]: https://github.com/feugy/atelier/tree/main/packages/vite-plugin-atelier\n[ui-tests]: https://github.com/feugy/atelier/blob/main/packages/ui/tests/components\n","readmeFilename":"README.md"}