[CS1] Migrating from CS1 to CS2

In short, there is no automatic way to migrate from CS1 to CS2. This article tells you why, and also some helpful tricks to aide in your manual migration.

Why is there no automatic migration?

While the user interfaces are very similar, the two platforms are architecturally very dissimilar. Virtually everything has changed from the templating language, to the types of steps (called layers in CS2), to how images and fonts are handled is entirely different. As such we could write a migration tool, but it would only get you 80% of the way there and leave your designs in a broken state. Plus, you wouldn't have learned how to actually use CS2, and thus your frustration would mount.

We do not plan to discontinue CS1 anytime soon. Thus our recommendation is to keep your old projects in CS1, and build all your new projects in CS2. Only CS2 will be getting bug fixes and new features and support. At some point CS1 will age out (technologically speaking) and stop working, so migrating to CS2 for your current and new projects is imperative.

Why Migrate?

As mentioned above, there will be no new features, bug fixes, or support for CS1 going forward. But beyond that, CS2 can do a huge list of things better/faster than CS1. Here's an abbreviated list of why CS2 is better:

Drag and drop positioning and rotating of elements.
The user interface is dramatically faster. It has been benchmarked at 20x faster on a particularly large design.
Datasets are more like spreadsheets with the ability to copy and paste entire rows of data and more control over sizing and formatting of columns.
Layer Groups allow you to organize, rotate, or even hide groups of layers all at once.
Simple Table is way easier to use (though Advanced Table is still present) to create grids of data on your components.
You can apply textures to shapes.
Google Sheets import is faster.
Each layer (step) can reference any previous layer, not just the immediately preceding layer, which can make dynamic positioning easier and more flexible.
Full style management means you can update a style in one place and it will affect your text / font settings all through out your design without having to edit individual settings on lots of layers.
Style tags allow you to use an unlimited number of text styles per text field.
Style inheritance allows you to combine styles dynamically so you don't have to edit the same settings in more than one style.
Export times are dramatically faster as CS2 can export 1 component per second, which is up to 10 times faster (depending upon your computer speed) than CS1.
Inline icons are easier as they use simple tags like <damage/> rather than the old URL system, and they can be easily manipulated with style tags.
Tons of quality of life improvements such as better error messaging, collections, editing your dataset inside the designer, and UI preference settings.
CS2 can a dramatically wider array of component types than CS1; screens, dials, dice, and boxes to name a few.

Manual Migration Tips

Here are a few tips we can give you if you are coming from CS1 to CS2.

Images

Unlike CS1, CS2 requires you to upload your images into its editor. You can do this by hitting the image button in the toolbar of either the dataset editor or the designer.

There are several reasons for this, but the most important is that CS2 runs directly in your web browser rather than on the server, which means it is subject to your web browser's security rules and one of them (called CORS) doesn't allow us to load images from third-party web sites like Google Drive or Dropbox.

Also inline images are handled differently. In the image editor you mark an image to allow it to be an icon. You toggle the button highlighted in green below and it will allow you to use the image inline in text using a simple tag like <YellowGem/>.

Templating Language

Template variables are formatted slightly differently. The big difference is that there are now double brackets vs single brackets, and no $ signs at the start of variable names. Also, some things that used to be handled by system variables are now functions. The following table shows a few examples of common use cases.

CS1	CS2
{$name}	{{row.name}}
{$quantity}	{{row.quantity}}
{$_.centermex}	{{centerMeX()}}
{$_.centermey}	{{centerMeY()}}
{$_.prevx}	{{layerRight('$previous')}}
{$_.prevy}	{{layerBottom('$previous')}}

The template functions in CS1 have all been updated in CS2 and may have new syntax, so of you are using any make sure you read how they work now.

Datasets

Datasets have been vastly improved in CS2, working more like a spreadsheet. You can migrate your dataset from CS1 by exporting a CSV file, and then uploading it into CS2's dataset editor. This video shows you how to import a CSV file into CS2.

Google Sheets imports have been updated to work better in CS2 as well. Click here to see how to do that.

Layers/Steps

The layers in CS2 work similarly to CS1's steps, but have a lot of new functionality. This table shows you what layers in CS2 directly correlate to steps from CS1.

CS1	CS2
Box	Box
Circle	Orb
Hex	Polygon
Image Grid	Inline Icons in a Text Layer serve this purpose now
-	Layer Group
Line	No direct equivalent, was used by less than 1% of CS1 projects, use Box instead
Mirror	No direct equivalent, was used by less than 1% of CS1 projects
Note	Note
Polygon	Polygon
Table	Table
Text	Text
Twirl	Use the rotate feature of Layer Groups

Questions

If you have questions, please ask them on one of our support platforms.