---
title: It's Just JSON
---

<p>
    Remember that your models are plain old JavaScript objects. This is also true for the basic models included with Maker.js we've seen above.
    To illustrate this, we will export a model using JSON.stringify. Let's use the Tablet Mount again as our example:
</p>

{% highlight javascript %}
var makerjs = require('makerjs');

var outer = new makerjs.models.RoundRectangle(200, 280, 8);

var inner = new makerjs.models.RoundRectangle(160, 230, 8);
inner.origin = [20, 30];

var buttonhole = new makerjs.paths.Circle([100, 15], 8);

var bolts = new makerjs.models.BoltRectangle(180, 260, 2);
bolts.origin = [10, 10];

var tabletFaceMount = {
  paths: { buttonhole: buttonhole },
  models: { inner: inner, outer: outer, bolts: bolts }
};

var svg = makerjs.exporter.toSVG(tabletFaceMount);

document.write(svg);
{% endhighlight %}

<script>
    LiveDoc.evalLastCode();
</script>

<p>
    Now let's pass tabletFaceMount through JSON.stringify and look at the result:
</p>

{% highlight javascript %}
var makerjs = require('makerjs');

var outer = new makerjs.models.RoundRectangle(200, 280, 8);

var inner = new makerjs.models.RoundRectangle(160, 230, 8);
inner.origin = [20, 30];

var buttonhole = new makerjs.paths.Circle([100, 15], 8);

var bolts = new makerjs.models.BoltRectangle(180, 260, 2);
bolts.origin = [10, 10];

var tabletFaceMount = {
  paths: { buttonhole: buttonhole },
  models: { inner: inner, outer: outer, bolts: bolts }
};

var json = JSON.stringify(tabletFaceMount);

document.write('<code>' + json + '</code><hr />');
{% endhighlight %}

<script>
    LiveDoc.evalLastCode();
</script>

<p>
    We can copy and paste this same JSON and re-use it directly as a model:
</p>

{% highlight javascript %}
//render from a blob of JSON

var makerjs = require('makerjs');

var tabletFaceMount = {"paths":{"buttonhole":{"origin":[100,15],"radius":8,"type":"circle"}},"models":{"inner":{"paths":{"BottomLeft":{"origin":[8,8],"radius":8,"startAngle":180,"endAngle":270,"type":"arc"},"BottomRight":{"origin":[152,8],"radius":8,"startAngle":270,"endAngle":0,"type":"arc"},"TopRight":{"origin":[152,222],"radius":8,"startAngle":0,"endAngle":90,"type":"arc"},"TopLeft":{"origin":[8,222],"radius":8,"startAngle":90,"endAngle":180,"type":"arc"},"Bottom":{"origin":[8,0],"end":[152,0],"type":"line"},"Top":{"origin":[152,230],"end":[8,230],"type":"line"},"Right":{"origin":[160,8],"end":[160,222],"type":"line"},"Left":{"origin":[0,222],"end":[0,8],"type":"line"}},"origin":[20,30]},"outer":{"paths":{"BottomLeft":{"origin":[8,8],"radius":8,"startAngle":180,"endAngle":270,"type":"arc"},"BottomRight":{"origin":[192,8],"radius":8,"startAngle":270,"endAngle":0,"type":"arc"},"TopRight":{"origin":[192,272],"radius":8,"startAngle":0,"endAngle":90,"type":"arc"},"TopLeft":{"origin":[8,272],"radius":8,"startAngle":90,"endAngle":180,"type":"arc"},"Bottom":{"origin":[8,0],"end":[192,0],"type":"line"},"Top":{"origin":[192,280],"end":[8,280],"type":"line"},"Right":{"origin":[200,8],"end":[200,272],"type":"line"},"Left":{"origin":[0,272],"end":[0,8],"type":"line"}}},"bolts":{"paths":{"BottomLeft_bolt":{"origin":[0,0],"radius":2,"type":"circle"},"BottomRight_bolt":{"origin":[180,0],"radius":2,"type":"circle"},"TopRight_bolt":{"origin":[180,260],"radius":2,"type":"circle"},"TopLeft_bolt":{"origin":[0,260],"radius":2,"type":"circle"}},"origin":[10,10]}}};

var svg = makerjs.exporter.toSVG(tabletFaceMount);

document.write(svg);
{% endhighlight %}

<script>
    LiveDoc.evalLastCode();
</script>

<p>
    Note that you might obtain JSON from some other source, perhaps generated by a tool. The only requirement for it to work with Maker.js is it must have the properties as described above.
</p>