- Add 'vike prerender' to build script so prerendering runs after vite
build
- Move prerender: true from vite.config.ts to pages/+config.ts where
Vike reads it
- Remove prerender option from vike() plugin call in vite.config.ts
Fixes#5649
Brave Shields blocks our bot protection mechanism (matchMedia
fingerprinting detection), causing form submissions to silently fail.
- Added getBraveErrorHtml() in SDK that returns error message HTML
- Form component renders the error when Brave is detected
See: https://github.com/brave/brave-browser/issues/46541
## 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
Ref https://github.com/webstudio-is/webstudio/issues/5551
Redirects are supported in vike but never worked when SSG is generated
and actually failed the build. Extended ssg fixture with redirect to
catch this on CI.
Ref https://github.com/webstudio-is/webstudio/issues/5389
1. **Title and meta tags (specified in page settings) are no longer
removed when page is loaded.** For this I switched to the same
components we use in cloud template.
2. **Avoid duplicating custom code**. Both server and client rendered
the same custom code and react instead of hydrating just duplicates
them. To fix this I removed custom code from client side so all scripts
and styles are rendered only once.
3. **Removed origin from og:image url.** Turns out it is not necessary
to have full url for og:image to work, all services are capable to
resolve url. We can remove it at least for static websites.
4. **SSG rendered fake url (https://url) in ld-json** which can have
unexpected results in search engines. Removed it, google should be able
to provide necessary url by itself.
## Problem
The current-date system resource works in the Webstudio builder but
fails in published sites with "dateTime attribute is not set" errors.
## Root Cause
The CLI templates' `customFetch` functions handle the `sitemap.xml`
local resource but don't handle the `current-date` resource, causing
fetch requests to fail when sites are published.
## Solution
Added `current-date` handler to all CLI template `customFetch`
functions, following the same pattern as the existing `sitemap.xml`
handler.
## Changes
- Add current-date handler to Remix HTML/XML templates
- Add current-date handler to React Router HTML/XML templates
- Add customFetch with current-date handler to SSG template
- Normalize dates to midnight UTC to prevent hydration mismatches
## Testing
The fix ensures that when the Time component uses `system.currentDate`,
it will work correctly in published sites, not just in the builder.
Closes https://github.com/webstudio-is/webstudio/issues/3510
## Summary
This PR adds a **Current Date** system resource, extends the `system`
object with a `pathname` property, and enhances the **Time component**
with custom date formatting capabilities to provide more flexibility and
prevent hydration errors.
### Key Features
1. **Current Date System Resource** - Provides normalized date/time
information that prevents React hydration errors
2. **System Pathname** - Adds `pathname` property directly to the
`system` object for easy access in expressions
3. **Time Component Custom Formatting** - Adds a `format` prop with
template tokens for flexible date/time display
## Motivation
These changes solve important use cases:
- **Current Date**: Prevents React hydration errors when displaying
dynamic dates (e.g., copyright years in footers). Previously, using `new
Date()` in expressions would cause server/client mismatch.
- **System Pathname**: Provides easy access to the current page path in
expressions without needing to parse the URL manually.
- **Custom Time Formatting**: Allows users to format dates with simple
templates (e.g., `YYYY-MM-DD`) without being limited to
`Intl.DateTimeFormat` options, and provides a simple way to exclude
specific date or time components to avoid hydration issues.
## Changes
### Current Date Resource
- Created
[`apps/builder/app/shared/$resources/current-date.server.ts`](apps/builder/app/shared/$resources/current-date.server.ts)
- Provides date fields: `year`, `month`, `day`, `iso`, `timestamp`
- All values normalized to midnight UTC (00:00:00.000Z) to prevent
hydration errors
- Registered in
[`rest.resources-loader.ts`](apps/builder/app/routes/rest.resources-loader.ts)
- Added to SystemResourceForm dropdown in UI
### System Pathname
- Added `pathname` property to
[`System`](packages/sdk/src/schema/pages.ts) type
- Updated [`system.ts`](apps/builder/app/shared/system.ts) to compute
and include pathname
- Normalized empty pathname to `'/'` for consistency
- Available in expressions as `system.pathname`
### Time Component Enhancements
- Added [`formatDate()`](packages/sdk-components-react/src/time.tsx:353)
function supporting template tokens:
- `YYYY`, `YY` - year (4-digit, 2-digit)
- `MM`, `M` - month (zero-padded, no padding)
- `DD`, `D` - day (zero-padded, no padding)
- `HH`, `H` - hours (zero-padded, no padding)
- `mm`, `m` - minutes (zero-padded, no padding)
- `ss`, `s` - seconds (zero-padded, no padding)
- Added `format` prop to
[`Time`](packages/sdk-components-react/src/time.tsx:386) component that
overrides `dateStyle`/`timeStyle` when provided
- Updated component logic to check for `format` prop first before
falling back to `Intl.DateTimeFormat`
- Added comprehensive tests for date formatting in
[`time.test.ts`](packages/sdk-components-react/src/time.test.ts)
- Updated component metadata in
[`time.ws.ts`](packages/sdk-components-react/src/time.ws.ts) to include
`format` in initialProps
- Example: `format="YYYY-MM-DD HH:mm:ss"` displays as "2025-11-03
18:47:25"
### Template & Fixture Updates
- Updated all CLI templates (defaults, react-router, SSG) to include
`pathname` in system objects
- Updated all fixture files (47 files total) to include `pathname` in
system objects
- All 694 tests passing
- All typecheck passing
## Usage
### Current Date Resource
Users can now add the Current Date resource from the Data Variables
panel:
1. Click + next to Data Variables
2. Select "System Resource"
3. Choose "Current Date" from the dropdown
4. Access in expressions:
- `date.year` - for copyright year
- `date.month` - current month (1-12)
- `date.day` - current day (1-31)
- `date.iso` - ISO 8601 string
- `date.timestamp` - Unix timestamp
### System Pathname
Access the current page path directly:
- `system.pathname` - current page path (e.g., `/about`, `/blog/post-1`)
### Time Component Custom Format
Use the `format` prop for custom date/time display:
```jsx
<Time datetime="2025-11-03T18:47:25Z" format="YYYY-MM-DD" />
// Displays: 2025-11-03
<Time datetime="2025-11-03T18:47:25Z" format="YYYY-MM-DD HH:mm:ss" />
// Displays: 2025-11-03 18:47:25
<Time datetime="2025-11-03T18:47:25Z" format="M/D/YYYY" />
// Displays: 11/3/2025
```
Technical Notes
- Current Date values are normalized to midnight UTC to ensure
consistency throughout the day and prevent hydration mismatches
- The pathname property is computed from the request URL and normalized
to '/' when empty
- Custom format templates in the Time component are processed before
falling back to Intl.DateTimeFormat
- All changes are backward compatible
Ref https://github.com/webstudio-is/webstudio/issues/4077
How it works
- Cache-Control opts in caching (Cache-Control: max-age=3600)
- cached response is matched by url, method and body
- cache is invalidated with Cache-Control change
- responses stored with the cache are not replicated across regions
- responses are not shared between projects
Link for testing
https://test-cache-hcevl.wstd.work/?message=hello
IPX we use for image generation does not support .ico format and fails
to process it. Here I just skip image optimization for .ico and pass url
directly.
Added react-router + cloudflare template to migrate our cloud
publishing.
This template does not support image optimization and intended only for
internal usage.
## Description
Error toasts in components instead of failing
## 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
https://animations.wstd.work/
Breakpoints Example
See on narrow screen animation is disabled.
<img width="699" alt="image"
src="https://github.com/user-attachments/assets/f464fdf3-f57a-4cf7-91a1-beb355f8a5bd"
/>
## 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
Ref https://github.com/webstudio-is/webstudio/issues/4093
Here's refactoring to unlock resource UI in webhook form
Need to test in builder and on published site
1. Create webhook form in main and try to update it on this branch. So
legacy text prop should automatically migrate to resource.
2. New webhook form should create resource when type anything in action
prop
## 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 don't really need anything from asset object on published sites
except the name to resolve the file.
Here got rid from Asset objects for favicon, fonts and backgrounds. This
should reduce client bundle where a lot of assets are used.
We want to migrate more templates to react-router
so here I split docker template into react-router and
react-router-docker. Image processing, dockerfile and node environment
are left as docker specifics.
## 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
SSG templates have @webstudio-is/image imports which is not installed
when prebuild.ts imports constants.mjs.
Here removed URL.canParse checks in favor of netlify and vercel domains
configuration.
Added image a route for image processing in docker template based on ipx
package.
There a few things to note
- it does not have persistent caching and rely only on client cache
control
- performance is not good for remote images
- the package adds 30MB to node_modules, though it will be fixed soon
There is a DOMAINS env variable with comma-separated hosts to restrict
remote images processing similar to netlify and vercel.
Can be tested only locally for now.
Here added first react-router template which additionally adds docker
support. For now only adds Dockerfile + .dockerignore. Will add support
for image transforms separately.
Mostly duplicated defaults template
- replaced remix packages with react-router ones
- replaced `return redirect()` with `throw redirect()`
The template for now is self contained. Will split base react-router
template when will add more integrations.
## Description
Allows Head component
Hidden under `headSlotComponent` flag
Vercel fixture now have a HTMLRewriter example. Improves development.
## Todo In Next PR
- Head Title support
- Icons
- Allow reset `as` field
- [x] - BG is now white always
- [x] - It's shown as fixed element to not break layout
## Implementation details
This component has more priority above PageSettings meta tags
e.g. If some tag exists in PageSettings and in HeadSlot the HeadSlot
wins
## Steps for reproduction
Create HeadSlot
<img width="674" alt="image"
src="https://github.com/user-attachments/assets/b41f878e-b8fd-48b4-9204-5f079dc1719b"
/>
- [x] - Visit
https://webstudio-fixture-project-a-0su3o.wstd.work/head-tag
check server response.
<img width="433" alt="image"
src="https://github.com/user-attachments/assets/efb7de0d-c23e-4b0d-b775-170e6b61648e"
/>
See `og:title` is not duplicated.
- [x] - Check Elements Panel
<img width="565" alt="image"
src="https://github.com/user-attachments/assets/5742c3a8-47b1-4877-9b01-528eb3afffe5"
/>
See no duplicated. All tags exists.
- [x] - Click Home.
See no meta tags are in Elements panel from `/head-tag` page
- [x] - Click back button
<img width="555" alt="image"
src="https://github.com/user-attachments/assets/2b166249-5fd0-4d0f-a451-ff3c1b4e62b5"
/>
See all meta is rendered and is not duplicated.
## 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
closes#4695
Also allow link in xml
closes#4401
## 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
Oleg Isonen