Move Formats, CSS files, JS files, MiBlocks and whole Components from one site to another, and see exactly what will change before anything is saved. The examples follow the usual path: build and test on your Staging site, then move the change to Production. Screenshots use sample data.

On this page

• Moving changes from Staging to Production
• Overview
• Export Formats, CSS and JS
• Import Formats
• Import CSS and JS files
• Export and import MiBlocks
• Export and import Components
• Activity Log
• FAQs

Moving changes from Staging to Production

Build and test on your Staging site first. When it is ready, export it from Staging and import the file to Production. Nothing is saved on Production until you review the changes and click import.

Export and import work between any two Milestone sites, for example from Production back to Staging. This guide uses Staging to Production because it is the most common path.

Note: Staging to Production · There are 7 steps, only step 6 saves.

Steps 2 to 5 only read and compare; step 6 is the only one that writes to Production.

What do you want to move?

The steps

1. On Staging: test your change, then export it. A .json file downloads to your computer.

2. On Production (recommended): if you are changing items that already exist, export them from Production first. Keep this file as your copy of what is live today.

3. On Production: open the import screen for the same type and choose the file from step 1.

4. Check the banners: how many pages will change, how many of them are live, and whether there are legacy editor pages.

5. Review each changed row: compare what is on Production with what is in the file. For items that already exist, choose Update or New.

6. Import: click Import Selected or Import All.

7. Check: read the result, open the Activity Log, and look at the changed pages, including legacy editor pages.

How it keeps Production safe

Example scenarios in this guide

• A brand-new component: Example A in Export and import Components.
• An existing component with Format, MiBlock, CSS and JS changes: Example B in Export and import Components.
• A single Format, CSS, JS or MiBlock fix: the section for that type below.

Overview

Export items from one site, import the file on another, and review every change before you confirm.

Export Formats, CSS and JS (on Staging)

On the site you are moving from (usually Staging), tick the items in the list and click Export; a .json file downloads to your computer.

1. Go to Manage Layout and open Formats, CSS or JS.

2. Tick the items you want to move.

3. Click Export in the toolbar.

4. Your browser saves the file (for example cms-export-format-…json). An Export ready message appears in the top-right corner with the number of items and the file name.

The Import, Export and View Logs buttons sit in the toolbar of each list.

Every export is recorded in the Activity Log. MiBlock export has its own steps, see Export and import MiBlocks below.

Import Formats (on Production)

On the site you are moving to (usually Production), choose the file, check what will change, review, then confirm. Formats are matched to your site by Format Key. CSS and JS use the same screen (see the next section).

Step 1 — Choose the file

On the Format List, click Import. Click Choose File or drop the .json file into the box. The file is checked against your site straight away; nothing is saved until you import.

Choosing a file only checks it. Nothing is saved yet.

Step 2 — See what the file contains

A File checked message shows how many items are new, already on your site, or the same as your site.

When nothing changes, every row shows No change and the import buttons

Both formats show No change, so the import buttons stay disabled.

When something changes, the row shows what differs:

The yellow banner and the row show what will be replaced.

Step 3 — Read the table

The table is wide; scroll right to see Review and Upload.

Scroll right to reach Review changes and Upload.

Step 4 — Review the changes

Click Review changes to compare the current version (left) with the file (right). Removed lines are red, added lines are green. A note explains which settings Update keeps (for example the site's IsPublished flag). Click Upload this format to include it, Don't upload to leave it out, or Close.

Left: what is on the site now. Right: what is in the file.

Step 5 — Import

• Import Selected (n) imports only the ticked rows.
• Import All imports every row that has a change.

A confirmation lists what will happen and reminds you that it writes to the live site straight away. Click Import now to go ahead or Cancel to go back.

This is the last check before anything is saved.

Step 6 — Check the result

A green banner shows Import finished with the counts (for example "1 replaced"), the log entry number, and links to See the activity log or Import another file. An Import successful message also appears in the top-right corner.

The counts, the log entry and the next actions.

Leaving the screen

If you click Back to JS List before importing, you are asked to confirm, because the checked file will be cleared.

Shown if you leave before importing.

Import CSS and JS files (on Production)

CSS and JS files use exactly the same steps as Formats; only the names on the screens change. Files are matched to your site by file name, and Review changes shows the whole file side by side.

Open Manage Layout > CSS or Manage Layout > JS. The Import, Export and View Logs buttons are in the toolbar.

CSS list toolbar.

JS list toolbar.

Click Import to open the import screen, then follow Steps 1–6 above.

The CSS import screen. The JS screen looks the same.

Export and import MiBlocks

A MiBlock always moves with all its sub-MiBlocks, so each MiBlock is one row with its tree inside it.

Export MiBlocks (on Staging)

1. Go to MiBlock > MiBlocks on Staging, tick the MiBlocks you want to move, and click Export.

Tick the MiBlocks, then click Export.

2. The Export MiBlock bundle window shows what you selected, what is included (Details, Configuration, Json-LD, Definition fields, Site-Level Settings and all nested sub-MiBlocks), what is left out (records), and the file name. Click Download bundle.

What is included, and what is left out (records).

3. Your browser saves the file, and an Export ready message appears in the top-right corner.

The file is saved to your computer.

Import MiBlocks (on Production)

Step 1 — Choose the file

On Production, open the MiBlock list and click Import, then Choose File or drop the file into the box.

Choosing a file only checks it. Nothing is saved yet.

Step 2 — See what the file contains

• As with Formats, a green banner means nothing on your site is replaced.
• A yellow banner shows how many pages will change and how many are live.
• The Also import site-level settings box (on by default) brings in max records, format and resource type from the file. Untick it to keep your site's own.

No change: there is nothing to import.

One MiBlock changed: the yellow banner shows the pages affected.

Step 3 — Read the table

• Each MiBlock shows its name, alias and a summary of its sub-MiBlocks, for example "1 sub-MiBlock · 1 level · 1 no change".
• The Changes column shows what differs, for example "1 MiBlock changed · Fields +2 ~1" (2 fields added, 1 changed).
• Impacted Components, Impacted Pages, Review and Upload work as for Formats. Scroll right to see them.

Review changes and Upload are on the right.

Step 4 — Review the changes

Click Review changes (or View on an unchanged row). The MiBlock tree on the left lets you move between the MiBlock and its sub-MiBlocks.

• Fields lists every field with its alias, type and change: Changed, New or Same. What differs shows the old value struck out and the new value.
• Settings, Field tabs and Site-level settings show each value On this site next to In the file.
• Tick Show only changes to hide what is the same. Sub-MiBlocks have Settings, Fields and Field tabs.
• Click Close when done. Use the Upload box in the table to include or leave out a MiBlock.

Fields: the old value struck out, the new value next to it.

Settings: on this site, next to in the file.

Site-level settings from the file.

Use the tree to open a sub-MiBlock.

Step 5 — Import

Click Import Selected or Import All. The confirmation lists:

• what will be replaced and what is left out
• how many pages, and live pages, will change
• whether site-level settings are imported

Click Import now to go ahead.

The last check before anything is saved.

Step 6 — Check the result

• The green banner shows the counts, for example "1 replaced, 1 already up to date".
• Each updated MiBlock shows what changed, for example "2 fields added, 1 fields updated".
• Hover over the component count to see which components use it.

The counts, and what changed in each MiBlock.

Export and import Components

A component moves as one bundle: the component and every item it uses (its Format, MiBlocks with their sub-MiBlocks, CSS and JS). Records are not included. The examples below follow two components from Staging to Production:

Export a component (on Staging)

1. Go to Components. Click ⋮ on the component's row and choose Export.

On Staging: the row menu of Room Offers Carousel.

2. The file downloads straight away; there is no confirmation window. A message confirms the export, for example "Room Offers Carousel exported with all linked assets." The file name looks like cms-export-vcomponent-room-offers-carousel-…json.

The export is done; there is no confirmation window.

Import a component (on Production)

Step 1 — Choose the bundle

Go to Components and click Import. Click Choose File and pick the .json file. The bundle is checked straight away; nothing is saved yet.

On Production: choosing a file only checks it.

Step 2 — See what the bundle contains

The file card shows the file name, size, what is inside (for example "1 component + 1 format + 2 MiBlocks + 1 css + 1 js") and the export date. Click Remove file to start again.

Example A: every row shows Create and the green banner shows no pages affected.

Example B: Update, Create and No change rows, with the yellow banner showing 14 pages and 9 live.

Step 3 — Read the table

Step 4 — Review the changes

Click Review on any row, including a sub-MiBlock.

• MiBlocks open with the MiBlock tree on the left and the tabs Settings, Definitions and Site Level Settings. Each change shows the old value struck out next to the new value, marked Changed or New. Tick Show only changes to hide what is the same.

MiBlock review: two fields changed and one new field.

• Formats, CSS and JS open side by side: On this site on the left, Import bundle on the right. Removed lines are red and added lines are green.

Format review: red lines are removed, green lines are added.

Step 5 — Import

• The footer shows how many changed items are set to import, and how many pages (and live pages) are affected.
• Import Selected (n) imports the items set to import. Import All imports every item that has a change.
• A progress window appears. Keep the page open until it finishes; it can take a minute for components with many MiBlocks.

Keep the page open while this runs.

Step 6 — Check the result

• A banner shows Import complete with the counts, for example "2 added, 4 replaced, 2 already up to date". Already up to date means No change.
• Click Details to see each item.
• A message appears in the top-right corner, and the Activity Log count goes up by one.

The counts, with Details for each item.

Component Activity Log

Open it from View Logs on the Components list, or the Activity Log tab on the import screen. The columns are Date & time, Action, Summary, User and File, with a Details / Hide button on each row.

• Import details: one line per item with its result: Created, Updated (with how many sub-MiBlocks were replaced) or No change. The last line notes that legacy editor pages were not checked for impact.
• Export details: the component and its linked Format, MiBlocks, CSS and JS, and a note that data records are not included.

The example below shows Production after both imports. It also shows the copy of Dining Menu exported from Production just before it was updated, as recommended in The steps at the top.

Read from the bottom up: Room Offers Carousel added, a copy of Dining Menu saved, then Dining Menu updated.

Activity Log

Every import and export is recorded, so you can see who moved what and when.

Open it from View Logs on the list, or the Activity Log tab on the import screen. Formats, CSS, JS, MiBlocks and Components each have their own log. Exports are logged on the site you exported from, and imports on the site you imported to. Use Refresh to load the latest entries and Newer / Older to page through them.

Click Details on a row to see one line per item.

The log is read-only and kept for 12 months. The same entries are also written to each item's own version history.

FAQs