Right-click an instance in the Navigator and choose **Copy link to
instance** to share its full Builder URL. Opening it restores the page
and the same instance occurrence, including descendants of shared Slots.
The shared menu also exposes the action on the canvas.
Copying and opening a link use the same existing
`getDeepLinkedInstanceSelection` function, moved unchanged from
`use-switch-page.ts` into `shared/instance-utils/link.ts`, alongside URL
creation and the existing instance URL parser. It validates the instance
path and page access. The context menu and pre-publish “Show element”
links both call `getInstanceLink(instanceSelector)`. It lives in
`shared/instance-utils/link.ts` and owns validation and the complete URL
setup: project, page, full selector, origin, share token, editor mode,
and safe mode, using the existing `builderUrl`. There is no separate
link-permission implementation.
The link keeps the current share access and editor mode, clears
unrelated scroll anchors, and shows clipboard success or failure. Body
is supported; Global Root and multiple selections are unavailable.
Instance-only navigation now preserves loaded Builder data: the route
comparison recognizes the `instance` parameter as well as the older
`instanceId`. A functional regression test confirms that changing the
target does not change the data URL comparison, while changing share
access does.
MCP guidance explains how to extract the target ID from the link for
`inspect-instance`, verify the project and shared Slot context, and
avoid guessing when an instance no longer exists. This does not add a
URL-taking MCP endpoint.
1. [x] Add the menu action and reuse complete instance-link construction
with pre-publish links.
2. [x] Share existing instance-link validation between copying and
opening links.
3. [x] Update the Navigator and MCP guidance; regenerate CLI
documentation.
4. [x] Extend the existing functional test to round-trip a shared Slot
URL, including share access and editor mode. Verify it fails without the
instance parameter and passes after restoration.
5. [x] Remove the React/clipboard test harness and duplicate
permission-test matrix. Confirm no fixture inputs or outputs are
affected.
Validation: 28 focused Builder tests, Builder typecheck, repository
lint, and `git diff --check` pass on this revision. The earlier CLI
documentation checks passed and their inputs are unchanged. An earlier
GPT-5.4 mini subagent at low reasoning passed a focused native MCP test
against commit 072a8dc534: given only a link and text-edit request, it
changed the correct heading among three identical-looking headings,
leaving all other fixture records unchanged. It used four MCP calls with
broad instance/text reads. That agent test used an isolated local
fixture; it was not a production or shared-Slot agent test. Screenshots
and the full agent evaluation suite were not run.
Closes#4610
Ref #4364
Closes#6306
## Outcome
Content Block templates are now the public component model for MDX
authoring.
- Standard Markdown resolves through matching Content Block templates.
- PascalCase JSX resolves to a named template first, then to a
registered component.
- Adding or changing a template immediately affects matching MDX,
including content authored before that template existed.
- Every supported standard MDX element is present in new Content Blocks
by default.
- Template `name` is a stable PascalCase JSX identifier. `label` remains
optional display text only.
- Lowercase JSX represents native HTML and SVG without exposing
`ws.element` in authored syntax.
- Unknown, ambiguous, and unsafe JSX stays in source, produces a
source-ranged Builder diagnostic, and is omitted from published output.
- Frontmatter images preserve exact `$ref` values and use the Asset
description for `alt` text.
- Keyboard and mouse insertion from the slash menu remove the trigger
slash and preserve the selected template.
## Public MDX contract
- Markdown is canonical for standard prose.
- Lowercase JSX creates native elements:
`<section><p>Text</p></section>`.
- PascalCase JSX uses templates and registered components:
`<PromotionCard />`, `<Heading tag="h1">Title</Heading>`, and `<YouTube
src="https://youtu.be/KI5JHpzBK1s" />`.
- Component-name collisions use stable qualified identifiers such as
`Checkbox` and `RadixCheckbox`.
- A self-closing template keeps its designed default subtree. An
explicitly paired empty template clears it.
- Static quoted values and bare booleans are supported.
- Imports, exports, expressions, spreads, functions, executable
JavaScript, unsafe attributes, `<$.*>`, and authored `<ws.element>` are
rejected.
- `ws` remains only for compiler primitives with no React component.
## Implementation
- [x] Add stable, unique template names and keep them separate from
labels.
- [x] Parse and validate Markdown and JSX through their ASTs with
precise source ranges.
- [x] Share component identity between template JSX, Content MDX,
Builder materialization, reload, copy, and publication.
- [x] Resolve templates live after add, edit, rename, reorder, removal,
undo/redo, collaboration updates, and reload.
- [x] Preserve authored props, children, Asset references, template
defaults, and the exact slash-menu template choice.
- [x] Make one typed MDX semantic inventory drive default templates and
slash-menu eligibility.
- [x] Move component-dependent template assembly into the component
registry.
- [x] Replace production `$`, `animation`, and `radix` JSX namespaces
with direct component imports.
- [x] Keep only explicit compiler primitives in `ws` template JSX.
- [x] Migrate repository templates, fixtures, stories, examples, MCP
guidance, CLI guidance, and generated outputs.
- [x] Add Builder unit and Playwright coverage for authoring,
diagnostics, insertion, synchronization, reload, and publication.
- [x] Review and update the authoritative Content Block and generated
MCP documentation.
## Compatibility
- Persisted project data continues to use namespaced component IDs and
`ws:element` for generic HTML elements. No project-data migration is
required.
- Legacy `<ws.element ws:tag="…">`, `<ws.element ws:name="…">`, `<$.*>`,
`<animation.*>`, and `<radix.*>` input remains readable during the
compatibility window.
- Current serializers and repository-owned sources emit only canonical
Markdown, lowercase intrinsic JSX, or PascalCase identifiers.
- Untouched user MDX is not rewritten automatically. Legacy syntax is
canonicalized when its owning source is edited.
- Deferred follow-up: remove legacy namespace readers and proxy support
only after the canonical writer is deployed and existing projects are
backfilled. This is intentionally outside this PR.
## Verification
- [x] CI package tests, typechecks, lint, package boundaries, generated
assets, migrations, and size checks pass.
- [x] All six Builder E2E shards pass.
- [x] Fixture checks pass on Ubuntu and Windows.
- [x] Targeted local Content Engine, Template, SDK, registry, Project
Build, migration, Builder, component, CLI, and Playwright tests pass.
- [x] Runtime contracts, CLI docs, and MCP docs were regenerated from
their owning sources.
- [x] Local fixture generation completed without an unexpected fixture
diff.
- [x] Documentation impact reviewed and included in this PR.
- [x] Review and approve the intentional List visual snapshot change.
- [x] Run the complete agent evaluation suite after explicit approval.
- [x] Run the network fixture link/sync pipeline against the matching PR
deployment after explicit permission.
## Known visual change
The generated List story now targets its actual default `ul` element
instead of `ol`, so the default list styling appears in the visual
snapshot. The visual change was reviewed and the approved visual check
passes.
## Summary
Preserve exact Builder instance selections during initial load,
authentication, and hard reload, including shared content rendered
through multiple Slot instances.
## Implementation
- [x] Store the complete selector in one comma-separated `instance` URL
parameter.
- [x] Reuse `canResolveInstanceSelector` to validate every selector path
before restoring it.
- [x] Resolve the selected page from the selector root.
- [x] Wait for the authoritative Builder data-loaded state before
applying initial URL state.
- [x] Keep selection-to-URL synchronization paused until initial URL
state is resolved.
- [x] Let the existing auth loader derive `returnTo` directly from
Builder requests.
- [x] Update generated Builder links, including pre-publish audit links,
to use full selectors.
- [x] Add regression coverage for incomplete sync data and duplicate
shared-slot child IDs.
## Verification
- [x] A fresh browser session authenticates and opens a direct selector
deep link.
- [x] Hard reload retains the exact selector URL and selection.
- [x] Clicking the first shared child creates an `instance` URL for the
first Slot path; reload restores the first occurrence.
- [x] Clicking the second shared child creates a distinct `instance` URL
for the second Slot path; reload restores the second occurrence.
- [x] Focused Vitest suite: 8 tests passed.
- [x] Builder TypeScript typecheck.
- [x] Focused oxlint.
- [x] Focused oxfmt check.
- [x] `git diff --check`.
## Compatibility and limitations
No schema, migration, or public API changes. This change uses one
canonical full-selector URL format; ID-only deep links are not retained
as a compatibility path.
## Summary
- add optional `instanceId` support to the shared Builder link
parameters used by `builderPath` and `builderUrl`
- synchronize the selected instance into the Builder URL without adding
a browser-history entry for every selection
- restore the selected page and full instance selector when opening an
instance deep link
- render a **Show element** link for pre-publish audit findings that
identify an instance
- switch to the affected page, select and scroll to the instance, and
close the publish popover when the link is used
## Why
The pre-publish audit introduced in #5922 identifies the invalid page
and instance, but its error was text-only. Users still had to locate the
offending element manually. A shared instance deep-link parameter also
makes these links copyable and reusable outside the audit UI.
## Impact
Builder URLs can now include `instanceId` alongside `pageId`. Existing
page-opening links continue using the same central
`builderPath`/`builderUrl` abstraction. Missing or stale instance IDs
safely fall back to the requested page.
## Validation
- focused Builder tests passed (4 tests)
- `@webstudio-is/builder` typecheck passed
- focused Oxlint passed
- focused Oxfmt check passed
- `git diff --check` passed
Adds permission protection around page templates so content editors can
create pages from templates without being able to open, edit, or patch
template pages directly.
## Description
1. Issue: https://github.com/webstudio-is/webstudio/issues/4931
2. Adds V1 of Page Templates for designers:
- stores project-local page templates separately from published pages
- adds a designer-only Page Templates section in the Pages panel
- supports creating, editing, duplicating, deleting, and reordering
templates
- supports creating a regular page from a template through a prefilled
page settings dialog
- makes canvas/page awareness, asset usage, asset replacement, and
page-copy utilities template-aware while keeping templates out of normal
public page lookup paths
## Steps for reproduction
1. Open the builder in Design mode and open the Pages panel.
2. Click the New Template button in the Page Templates section.
3. Fill in template settings, including name, title, description, search
toggle, social image, and custom metadata.
4. Click Create template and expect the new template to appear under
Page Templates and load on the canvas with an editable blank body.
5. Add content to the template canvas, reopen template settings, change
metadata, close/reopen settings, and expect the changes to persist.
6. Click the `+` action on the template row and expect a Create Page
from Template dialog prefilled from the template with a unique page
path.
7. Change page settings, click Create page, and expect a normal page to
be created in the root folder with copied content and metadata while the
template remains unchanged.
8. Right-click a template row, choose Duplicate, and expect a new
independent template copy with a deduplicated name.
9. Drag templates within the Page Templates section and expect the order
to persist.
10. Right-click a template row, choose Delete, confirm deletion, and
expect the template and its canvas tree to be removed. If the deleted
template was selected, expect the builder to navigate back to the home
page.
11. Switch to Content mode and expect template management UI to be
hidden.
12. Use a template social image from Assets, check asset usages, replace
the asset, and expect the template social image reference to update.
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [x] made a self-review
- [x] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [x] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
---------
Co-authored-by: shreyanshkotak <sk7739@nyu.edu>
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
- Changed safe mode detection from .has() to strict === 'true' check
- Made safemode a required boolean parameter in builderPath/builderUrl
- Added 'Open in safe mode' option to dashboard project menu
- Added safe mode indicator button with shield icon in topbar
- Safe mode now prevents all script execution in HTML embeds
- Added isSafeMode to React SDK context
- Added test coverage for safe mode in HTML embed component
## Description
1. What is this PR about (link the issue and add a short description)
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
We are moving away from binding system to variables and instead gonna
have one global variable.
Here moved system values into separate store coupled to pages instead of
variables.
Also fixed suggestions in address bar, probably broke while design
system refactorings.
Testing
- submit form with one named input
- check system value is rendered
- check system value can be inspected
## Description
closes#4691
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
0000)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
## Description
Part 1 Of #3994
This PR introduces a feature flag, `contentEditableMode`, that hides the
`EditorButton` in the top bar. This button is now intended for **testing
purposes only** and will **never be used in production**.
<img width="154" alt="image"
src="https://github.com/user-attachments/assets/f4a37334-71b9-43d8-b4a8-afd518fc6833">
## Most Notable Things In The Content Edit Mode
1. **Notion-like Editing**: Elements are editable with a single click.
2. **Restricted Element Editing**: Binded elements, such as expressions,
are non-editable.
3. **Selective Property Editing**: Only properties for `img` and `link`
elements are editable.
Additional changes:
- **Copy/Paste and Drag/Drop**: Disabled to maintain a controlled
testing environment.
Refer to the issue `Part 1` for further details on upcoming changes and
planned enhancements.
## Steps for reproduction
Play play
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
Ref https://github.com/webstudio-is/webstudio/issues/4364
We need to implement universal linking of current user view. For this I
added "awareness" state which reflects terminology from collaboration
libraries.
First migrated selected page id and fixed usages.
## Description
### Full track
https://github.com/webstudio-is/webstudio-saas/issues/317#issuecomment-2289241819
So thoughts about session
https://github.com/webstudio-is/webstudio-saas/issues/317#issuecomment-2314515772
Some explanations what is fixed and how
https://github.com/webstudio-is/webstudio-saas/issues/317#issue-2465048823
Next PR:
- [x] - Old share links auto redirect
- [x] - Try make better error message having that current PR will logout
all users.
## Steps for reproduction
1. Login using `google login` or `dev login` try to open projects on
dahsboard, create new, clone delete etc.
2. Try to open projects on dahboard, see each is on it's own domain and
work
3. Try to open project link (without share token) with other user -
should fail.
4. Try publish/clone any links and operations.
5. Share project from `userA`:
- try to open it with other `userB`
- see `userB` is not logged in to that project
- try to get using fetch from console anything about `userB` or `userA`
i.e rest etc endpoints on apps.webstudio.is domain
- try to open incognito, check it works.
6. Open few project, then logout from dashboard, reload project page
- See login page
- Try to login as same uer - see it works
- Or try to login as another user - see auth error
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env` file
To synchronize data between tabs it should be consistent and be easily
accessible. Loading from server creates huge latency and data can be
changed by loading from another tab.
Here moved data loading to client side so it can be shared through
IndexedDB.
Added new `/rest/data/:buildId` endpoint and defined global setter and
getter for current state.
Here improved history support. Now navigating with links from preview
adds paths into page history. This will let to reach same page without
switching to the list of posts.
Ref https://github.com/webstudio-is/webstudio/issues/404
## Description
- can select a nested path for link pages
- can click in preview to get to the page
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @TrySound , I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
Ref https://github.com/webstudio-is/webstudio/issues/404
## Description
- generate remix app with nested routes
## Steps for reproduction
1. create nested routes
2. generate app using cli
## Code Review
- [ ] hi @istarkov , I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
## Description
Pure renaming, nothing else.
## Code Review
- [ ] hi @TrySound , I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
Nanostore react wrappers in many cases introduce additional renders
because of subscription even when only store.set is used. Searching for
references become complicated because we have both direct store access
and react wrapper.
Here migrated to use direct store access for preview mode store and
renamed it to $previewMode according to new convention.
## Description
useSyncInitializeOnce is incompatibel with modern React especially in
dev mode.
useUnmount can't be used with it and any hooks with cleanup would give
the same issue.
Should affect only devmode
## Description
closes#1841
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
## Description
Changed pages synchronisation.
We had following path on link click in canvas:
- We intercept it in handleLinkClick and do publish('switchPage', {});
- We subscribe on 'switchPage' at builder and do navigate(builderPath, {
pageId});
- We subscribe on useSearchParams extract from there pageId and do
selectedPageIdStore.set(pageId)
- On Canvas we subscribe on selectedPageStore and finally render the
page
Now we just change
`selectedPageHashStore`, `selectedPageIdStore` in a single function
`switchPage`
`location.searchParams` used only for initial and popstate
synchronisation.
pageHashStore added for future use, no logic now.
## Steps for reproduction
1. click button
2. expect xyz
## Code Review
- [ ] hi @kof, I need you to do
- conceptual review (architecture, feature-correctness)
- detailed review (read every line)
- test it on preview
## Before requesting a review
- [ ] made a self-review
- [ ] added inline comments where things may be not obvious (the "why",
not "what")
## Before merging
- [ ] tested locally and on preview environment (preview dev login:
5de6)
- [ ] updated [test
cases](https://github.com/webstudio-is/webstudio-builder/blob/main/apps/builder/docs/test-cases.md)
document
- [ ] added tests
- [ ] if any new env variables are added, added them to `.env.example`
and the `builder/env-check.js` if mandatory
## Description
- Removed Link wrapper that used to apply `preserveBuildParams` (part 1
of #1120)
- Removed `preserveBuildParams` completely, because we no longer need it
as we request page switch instead of letting link to navigate
- Removed `mode` parameter from BuildParams, because it's always "edit"
now
- Fixes#1231
## Steps for reproduction
1. Open preview mode
2. Click on some links
Newly created instance does not propagate to client because we no longer
reload on navigating to new page.
Here moved page and root instance creation to client with patches.
Oleg Isonen