diff --git a/docs/scripts/stackblitz-template/src/app.html b/docs/scripts/stackblitz-template/src/app.html
index 7e8d2402c..f93d78794 100644
--- a/docs/scripts/stackblitz-template/src/app.html
+++ b/docs/scripts/stackblitz-template/src/app.html
@@ -7,7 +7,7 @@
%sveltekit.head%
-
## Usage
-`
diff --git a/docs/src/content/components/Chart.md b/docs/src/content/components/Chart.md
index 3e96e4d23..931313c61 100644
--- a/docs/src/content/components/Chart.md
+++ b/docs/src/content/components/Chart.md
@@ -7,12 +7,10 @@ related:
order: 1
---
-
-
## Usage
-`
diff --git a/docs/src/content/components/Hull.md b/docs/src/content/components/Hull.md
index 2729d85f9..ab4d2e443 100644
--- a/docs/src/content/components/Hull.md
+++ b/docs/src/content/components/Hull.md
@@ -5,16 +5,12 @@ layers: [svg, canvas]
related: []
---
-
-
## Usage
-`)
-` and either:
- implicit `x` / `y` (using ``)
-`
diff --git a/docs/src/content/components/Text.md b/docs/src/content/components/Text.md
index 95645197a..ae02b3f87 100644
--- a/docs/src/content/components/Text.md
+++ b/docs/src/content/components/Text.md
@@ -5,15 +5,11 @@ layers: [svg, canvas, html]
related: []
---
-
-
## Examples
### Usage
-`
and used for data selection and state management, `Tooltip` components (`Tooltip.Root`, `Tooltip.Header`, `Tooltip.List`, and `Tooltip.Item`) which are used for visual display.
@@ -93,53 +89,53 @@ Externally access tooltip data
### Basic
-Examples broken due to Group not positioning correctly with Canvas layers
+::warning
+Examples broken due to `Group` not positioning [correctly](https://github.com/techniq/layerchart/issues/662) with `Canvas` layers
+::
{/if}
## Usage
-` or `Simple Chart`.
@@ -21,17 +21,16 @@ The LayerChart project was written to offer options for both flexibility/complex
- The props details are fully up to you and fully customizable but the tradeoff is that you will need to implement more of the chart yourself.
- This is a good choice if you are experienced with Layerchart or plan on a need extensive control of many of the chart components.
- 2. You can use a Simple Chart if you are making a chart of supported types [ArcChart](https://next.layerchart.com/docs/components/ArcChart), [AreaChart](https://next.layerchart.com/docs/components/AreaChart), [BarChart](https://next.layerchart.com/docs/components/BarChart), [PieChart](https://next.layerchart.com/docs/components/PieChart) or [ScatterChart](https://next.layerchart.com/docs/components/ScatterChart) (more to come).
- - This is the recommended path for most users.
- - Under the hood, a simple chart is just a `` with a set of default subcomponents and predefined props.
- - Out of the box, Simple charts provide common functionality you need with exposed props which should cover most of the simple customizations.
- - Lets use <[LineChart](https://next.layerchart.com/docs/components/LineChart)> as and example and look at how little code is need to make this complex chart including built in tooltips, rule, axes, highlights and a legend.
+2. You can use a Simple Chart if you are making a chart of supported types [ArcChart](https://next.layerchart.com/docs/components/ArcChart), [AreaChart](https://next.layerchart.com/docs/components/AreaChart), [BarChart](https://next.layerchart.com/docs/components/BarChart), [PieChart](https://next.layerchart.com/docs/components/PieChart) or [ScatterChart](https://next.layerchart.com/docs/components/ScatterChart) (more to come).
+ - This is the recommended path for most users.
+ - Under the hood, a simple chart is just a `` with a set of default subcomponents and predefined props.
+ - Out of the box, Simple charts provide common functionality you need with exposed props which should cover most of the simple customizations.
+ - Lets use <[LineChart](https://next.layerchart.com/docs/components/LineChart)> as and example and look at how little code is need to make this complex chart including built in tooltips, rule, axes, highlights and a legend.
> Hover over a line, hover over legend items, and click legend items to see all the functionality given to you.
`, simplecharts fortunately gives you an escape hatch. Simple charts accepts children snippets giving you full control over the subcomponents just like a layered ``.
@@ -44,7 +43,7 @@ becomes
` component. This is a common powerful pattern in `Simple charts` where you can use snippets to customize the rendering of components while still leveraging all of the the underlying simple chart's built in functionality.
+Notice how we send getLegendProps to the snippet and then pass it to the `` component. This is a common powerful pattern in `Simple charts` where you can use snippets to customize the rendering of components while still leveraging all of the the underlying simple chart's built in functionality.
> It is a best practice to place the `{...getLegendProps()}` as the first prop. This allows you to overwrite any of its props by listing them to subsequently.
diff --git a/docs/src/routes/docs/markdown/+page.md b/docs/src/routes/docs/markdown/+page.md
index 70f23d0b4..9c0d09979 100644
--- a/docs/src/routes/docs/markdown/+page.md
+++ b/docs/src/routes/docs/markdown/+page.md
@@ -112,6 +112,19 @@
### Live Code
+```md
+``svelte live title="Counter.svelte"
+
+
+
+ count++}>
+Clicked {count}
+{count === 1 ? 'time' : 'times'}
+
+```
+
```svelte live title="Counter.svelte"
+
+{a}
+```
+
+:::
+
+:::tab{label="B"}
+
+```svelte live
+
+
+{b}
+```
+
+:::
+
+::
### Icons (Inline)
+```md
+Here's a :icon{name="lucide:code" class="text-primary"} code icon, a :icon{name="lucide:rocket" class="text-green-500"} rocket, and a :icon{name="simple-icons:github"} GitHub logo.
+```
+
You can also use icons inline with the `:icon` directive:
-Here's a :icon{name="lucide:code" class="text-primary"} code icon, a :icon{name="lucide:rocket" class="text-green-500"} rocket, and a :icon{name="simple-icons:github"} GitHub logo.
+Here's a :icon{name="lucide:code" class="text-primary"} code icon,a :icon{name="lucide:rocket" class="text-green-500"} rocket, and a :icon{name="simple-icons:github"} GitHub logo.
Icons support both formats: `collection:name` (like `lucide:code`) or `i-collection-name` (like `i-lucide-code`).
diff --git a/docs/src/routes/docs/playground/template/src/app.html b/docs/src/routes/docs/playground/template/src/app.html
index 7e8d2402c..f93d78794 100644
--- a/docs/src/routes/docs/playground/template/src/app.html
+++ b/docs/src/routes/docs/playground/template/src/app.html
@@ -7,7 +7,7 @@
%sveltekit.head%