---
title: "Saving results | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/design-atoms-cs/howto/saving-results/"
---

# Saving results

> The Design Atoms Framework allows you to [save products to state files](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Serialization/IStateFileSerializer.md) for long-term storage. For example, you can transfer these files to another computer for editing and rendering print-ready files.

You can also use the client-side and server-side code for serialization and deserialization of the [object model in the JSON format](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Serialization.Json.Product/IProductSerializer.md). For example, you can serialize your object model on the client side and pass it to the server within an HTTP request.

## Saving Products to State Files

The Design Atoms Framework provides the [State](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Model/State.md) class to store the internal product representation and the viewer's configuration. You can save these states for long-term storage by using the [IStateFileSerializer](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Serialization/IStateFileSerializer.md) interface. The following example illustrates how you can get an instance of the `StateFileSerializer` and save your state to a file.

```csharp title="Saving a product to a state"
using Aurigma.DesignAtoms.Configuration;
using Aurigma.DesignAtoms.Serialization;
using Newtonsoft.Json;

Injector.CurrentFactory = () => DefaultInjectorFactory.Create();
JsonConvert.DefaultSettings = () => DefaultJsonSettings.Get(Injector.Instance.Resolve<IConfiguration>());

var stateFileSerializer = Injector.Instance.Resolve<IStateFileSerializer>();
var state = new State(product);
using (var stateStream = File.OpenWrite("state.st"))
{
    stateFileSerializer.Serialize(state, stateStream);
}
```

To load a product from a state file, you can use the following code.

```csharp title="Loading a product from a state"
using (var stateStream = File.OpenRead("state.st"))
{
    var state = stateFileSerializer.Deserialize(stateStream);
    var product = state.Product;
}
```

## Connecting a Front End to a Back End

To connect your front end to a back end, you need to specify a running back-end URL when creating your canvas viewer.

```typescript title="Connecting a Front End to a Back End"
import { Viewer } from "@aurigma/design-atoms/Viewer/Viewer";
// A URL that links to a back-end instance.
const backendUrl = "http://<yourInstanceUrl>";
// An HTML element that contains the viewer.
const holder = document.querySelector(holderId) as HTMLDivElement;
// Initialization of the viewer.
const viewer = new Viewer({
    holderElement: holder,
    backendUrl: backendUrl,
    surface: product.surfaces.get(0),
    canvasBackground: { color: "white" }
});
```

Here, `backendUrl` may refer to both a custom back end and your instance of Design Editor 5, for example, deployed in the Aurigma's cloud. The `viewer` appears in a DIV element referenced by `holderId`.

To transfer products between the front end and back end, for example, in HTTP requests, you can use the JSON serialization API. To serialize and deserialize a [Product](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Model/Product.md) object to or from the JSON format, you can use the `JsonProductSerializer` class on the front end and the [IProductSerializer](https://customerscanvas.com/docs/on-premises/design-atoms-cs/reference/api/Aurigma.DesignAtoms.Serialization.Json.Product/IProductSerializer.md) interface on the back end.

For example, on the front end, you can serialize your product as follows:

```typescript title="Serializing a product"
import { JsonProductSerializer } from "@aurigma/design-atoms-model/Product/Serializer/JsonProductSerializer";
var serializedProduct = new JsonProductSerializer().serialize(product);
```

After that, on the back end, you can deserialize this product as follows:

```csharp title="Deserializing a product"
using Aurigma.DesignAtoms.Serialization.Json.Product;
var jsonSerializer = Injector.Instance.Resolve<IProductSerializer>();
var product = jsonSerializer.Deserialize(serializedProduct);
```

## The Sample

This sample illustrates how you can save a product to a state file and then load this state file to render a proof image by using the Design Atoms Framework.

```csharp title="Program.cs"
using System.IO;
using Aurigma.DesignAtoms.Configuration;
using Aurigma.DesignAtoms.Configuration.RenderingConfig;
using Aurigma.DesignAtoms.Model;
using Aurigma.DesignAtoms.Rendering;
using Aurigma.DesignAtoms.Serialization;
using Autofac;
using Newtonsoft.Json;

namespace DesignAtomsConsole
{
    class Program
    {
        static void Main(string[] args)
        {
            // Setting up the dependency injection.
            Injector.CurrentFactory = () => DefaultInjectorFactory.Create();
            // Setting up the serialization.
            JsonConvert.DefaultSettings = () => DefaultJsonSettings.Get(Injector.Instance.Resolve<IConfiguration>());

            CreateState(@"C:\CustomersCanvas\states\one-page.st");
            RenderState(@"C:\CustomersCanvas\states\one-page.st", @"C:\CustomersCanvas\previews\one-page.jpg");
        }

        static void CreateState(string newStateFile)
        {
            // Create a product.
            var product = new Product();
            var surface = new Surface(330, 600);
            product.Surfaces.Add(surface);

            // Instantiate IStateFileSerializer.
            var stateFileSerializer = Injector.Instance.Resolve<IStateFileSerializer>();
            var state = new Aurigma.DesignAtoms.Model.State(product);
            using (var stateStream = File.OpenWrite(newStateFile))
            {
                // Save the product to a state file.
                stateFileSerializer.Serialize(state, stateStream);
            }
        }

        static void RenderState(string stateFileName, string resultFileName)
        {
            using (var fstream = File.OpenRead(stateFileName))
            {
                // Instantiate IStateFileSerializer.
                var stateFileSerializer = Injector.Instance.Resolve<IStateFileSerializer>();
                // Load a product from a state file. 
                var state = stateFileSerializer.Deserialize(fstream);
                var product = state.Product;

                // Instantiate IProductRenderer.
                var productRenderer = Injector.Instance.Resolve<IProductRenderer>();
                using (var memoryStream = new MemoryStream())
                {
                    // Render the product to a stream.
                    productRenderer.RenderProof(memoryStream, product.Surfaces.First(), RenderingConfig.GetDefault());
                    // Write the resulting memory stream to a file.
                    memoryStream.Position = 0;
                    using (FileStream outputStream = File.OpenWrite(resultFileName))
                    {
                        outputStream.Write(memoryStream.GetBuffer(), 0, (int)memoryStream.Length);
                    }
                }
            }
        }
    }
}
```