Skip to content

Add some more PatchElement examples to the SDK ADR #941

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 19, 2025
Merged

Add some more PatchElement examples to the SDK ADR #941

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8463c56
Add some more PatchElement examples to the SDK ADR
gazpachoking Jun 18, 2025
6058a8a
Add description of the elements parameter
gazpachoking Jun 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 45 additions & 1 deletion sdk/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,6 +144,47 @@ data: elements </div>
```
</details>

<details>
<summary>Patch elements based on their id</summary>

```
event: datastar-patch-elements
data: elements <div id="id1">New content.</div>
data: elements <div id="id2">Other new content.</div>
```
</details>

<details>
<summary>Insert a new element based on a selector</summary>

```
event: datastar-patch-elements
data: mode append
data: selector #mycontainer
data: elements <div>New content</div>
```
</details>

<details>
<summary>Remove elements based on a selector</summary>

```
event: datastar-patch-elements
data: mode remove
data: selector #feed, #otherid
```
</details>

<details>
<summary>Remove elements without a selector</summary>

```
event: datastar-patch-elements
data: mode remove
data: elements <div id="first"></div><div id="second"></div>
```
</details>

`PatchElements` sends HTML elements to the browser for DOM manipulation.

> [!TIP]
Expand All @@ -162,6 +203,9 @@ data: elements </div>

### Parameters

- **elements**: One or more complete HTML elements. If a selector has not been specified, each element must contain an
id. With ElementPatchMode remove, this parameter may be omitted when a selector is supplied.

#### ElementPatchMode

String enum defining how elements are patched into the DOM.
Expand All @@ -183,7 +227,7 @@ String enum defining how elements are patched into the DOM.

| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `selector` | string | Element's `id` | CSS selector for target element |
| `selector` | string | Element's `id` | CSS selector for target element. If a selector is not specified, each element must have an id specified. |
| `mode` | ElementPatchMode | `outer` | How to patch the element |
| `useViewTransition` | boolean | `false` | Enable view transitions API |

Expand Down
Loading