Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
18 changes: 9 additions & 9 deletions blogs/blog/2026-11-02-new-preview.mdx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "New Preview: See Your React Native Changes in Seconds"
title: "Preview 2.0: See Your React Native Changes in Seconds"
authors: [raajvamsy]
---

Expand All @@ -13,7 +13,7 @@ authors: [raajvamsy]

---

Change something in your React Native app and see it in the preview almost right away. New Preview is now the default way WaveMaker Studio previews React Native apps on the web. There's nothing to set up: open your preview and you're already using it.
Change something in your React Native app and see it in the preview almost right away. Preview 2.0 is now the default way WaveMaker Studio previews React Native apps on the web. There's nothing to set up: open your preview and you're already using it.

{/* truncate */}

Expand All @@ -25,7 +25,7 @@ Change something in your React Native app and see it in the preview almost right

## What's new

Until now, every change you made meant rebuilding your whole app before the preview could update. New Preview changes that:
Until now, every change you made meant rebuilding your whole app before the preview could update. Preview 2.0 changes that:

- **Build only what's yours.** The libraries WaveMaker ships are the same for every app, so they're prepared once and shared. Your app is split into layers by how often they change, and editing a page rebuilds only the top layers.
- **Download only what changed.** Your browser keeps the pieces it already has and fetches only the ones that changed.
Expand All @@ -35,27 +35,27 @@ Until now, every change you made meant rebuilding your whole app before the prev

A faster preview means less waiting and more building. Try a color, move a widget or fix a label, and see the result in the preview you already have open.

Large apps benefit too. New Preview can build only the pages you're working on and build the rest when you open them, so you don't wait for pages you haven't touched.
Large apps benefit too. Preview 2.0 can build only the pages you're working on and build the rest when you open them, so you don't wait for pages you haven't touched.

## Do I need to do anything?

No. New Preview is on by default for React Native apps. If you had already turned it on with `"profile": "new-preview"`, that setting still works, and you can keep it or remove it.
No. Preview 2.0 is on by default for React Native apps. If you had already turned it on with `"profile": "new-preview"`, that setting still works, and you can keep it or remove it.

## Configuration options

All preview settings live in your project's `src/main/webapp/wm_rn_config.json` file. Keep any keys that are already in the file and add these next to them.

| Setting | What it does | Default |
| ------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
| `profile` | Set to `"legacy-web-preview"` to switch back to the classic preview. | New Preview |
| `profile` | Set to `"legacy-web-preview"` to switch back to the classic preview. | Preview 2.0 |
| `preview.allPages` | Set to `false` to build only the pages you're working on. Other pages build the first time you open them in the preview. | `true` (builds every page) |
| `preview.pages` | A list of page names that are always built, even when `allPages` is `false`. | None |
| `preview.liveReload` | Set to `false` to stop the open preview from updating itself. Refresh the preview when you want to see your changes. | `true` |
| `preview.pollIntervalMs` | How often, in milliseconds, the open preview checks on a running build. Use a larger number to check less often. The preview stops checking while its browser tab is hidden. | `2000` (every 2 seconds) |

### Build only the pages you're working on

For large apps, set `allPages` to `false`. New Preview then always builds your home page, your login page, the pages you edit, the pages you open in the preview, and any pages listed in `pages`. Partials used by those pages are built with them.
For large apps, set `allPages` to `false`. Preview 2.0 then always builds your home page, your login page, the pages you edit, the pages you open in the preview, and any pages listed in `pages`. Partials used by those pages are built with them.

```json
{
Expand Down Expand Up @@ -114,6 +114,6 @@ If you need the classic preview, add one line to `wm_rn_config.json`:
}
```

Save the file and preview your app again. To return to New Preview, remove the line.
Save the file and preview your app again. To return to Preview 2.0, remove the line.

If something doesn't look right in New Preview, switch back to the classic preview and let us know, with your project name and the steps to reproduce the issue.
If something doesn't look right in Preview 2.0, switch back to the classic preview and let us know, with your project name and the steps to reproduce the issue.
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,11 @@ For details about the technology stack upgrades, refer to [Technology Stack](/te

Enable ESLint and configure its rules in the project's Build Preferences under Settings. Existing projects are not affected until you enable it.

- ### New Preview is now the default <Pill type="mobile" />
- ### Preview 2.0 is now the default <Pill type="mobile" />

New Preview is now the default web preview for React Native apps. It shows your changes faster while you build and test your app, and you don't need to change anything to use it.
Preview 2.0 is now the default web preview for React Native apps. It shows your changes faster while you build and test your app, and you don't need to change anything to use it.

To switch back to the classic preview, add `"profile": "legacy-web-preview"` to `wm_rn_config.json`. For what's new and all the preview settings, see [New Preview: See Your React Native Changes in Seconds](/blog/2026/11/02/new-preview).
To switch back to the classic preview, add `"profile": "legacy-web-preview"` to `wm_rn_config.json`. For what's new and all the preview settings, see [Preview 2.0: See Your React Native Changes in Seconds](/blog/2026/11/02/new-preview).

- ### Left nav accuracy in Screenshot to Code <Pill type="web" />

Expand Down
Loading