PineWidget Export

Export your animations as lightweight embeddable widgets that can be hosted on any website.

Overview

PineWidget is a standalone animation player that renders your PinePaper creations without requiring the full editor. Key benefits:

• Lightweight — Pure Canvas 2D rendering (~15KB vs 200KB+ full editor)
• Standalone — No dependencies, works offline
• Interactive — Touch and mouse support for interactive elements
• Responsive — Auto-scales to fit container

When to Use PineWidget

Best for:

• Embedding on websites with full animation support
• Interactive motion graphics
• Animations with relations (orbits, follows, attached_to)
• Client presentations with playback controls

Exporting for PineWidget

Export as Template

1. Click File → Save as Template
2. Choose a name for your template
3. Download the .json file

Export as Scene

1. Click File → Export Scene
2. The scene JSON includes all items, animations, and relations

Embedding on Websites

Web Component (Recommended)

The simplest way to embed:

<!-- Load PineWidget -->
<script src="https://cdn.pinepaper.studio/widget.js"></script>

<!-- Embed your animation -->
<pine-widget
  src="https://yoursite.com/my-animation.json"
  autoplay
  loop
  interactive>
</pine-widget>

JavaScript API

For more control:

<div id="my-widget" style="width: 800px; height: 600px;"></div>

<script src="https://cdn.pinepaper.studio/widget.js"></script>
<script>
  // Create widget
  const widget = PineWidget.create('#my-widget', {
    autoplay: true,
    loop: true,
    interactive: true
  });

  // Load your animation
  widget.load(mySceneData);

  // Or load from URL
  // PineWidget.load('animation.json', '#my-widget');
</script>

Inline Scene Data

Embed scene data directly in HTML:

<pine-widget autoplay loop>
  <script type="application/json">
    {
      "width": 400,
      "height": 300,
      "background": "#1a1a2e",
      "items": [
        {
          "id": "title",
          "type": "text",
          "content": "Hello World",
          "x": 200,
          "y": 150,
          "fontSize": 32,
          "fillColor": "#ffffff"
        }
      ]
    }
  </script>
</pine-widget>

Widget Attributes

Playback Control

Control playback programmatically:

const widget = document.querySelector('pine-widget');

widget.play();      // Start playback
widget.pause();     // Pause playback
widget.stop();      // Stop and reset
widget.seek(2.5);   // Jump to 2.5 seconds

Supported Features

Animations

Relations

Item Types

What’s Not Supported

The widget is designed for playback, not editing. These editor-only features are not rendered:

• Background generators (Sunburst, Waves, etc.)
• Decorative elements (editor UI elements)
• Effects (Sparkle, Blast)
• Drawing paths (freehand drawings)
• Imported images (not yet supported)

Events

Listen for widget events:

const container = document.querySelector('#my-widget');

container.addEventListener('play', () => {
  console.log('Animation started');
});

container.addEventListener('pause', () => {
  console.log('Animation paused');
});

container.addEventListener('itemClick', (e) => {
  console.log('Clicked:', e.detail.item.id);
});

Responsive Sizing

PineWidget automatically scales to fit its container while maintaining aspect ratio:

<!-- Full width, auto height based on scene aspect ratio -->
<pine-widget src="scene.json" style="width: 100%;"></pine-widget>

<!-- Fixed size -->
<pine-widget src="scene.json" style="width: 400px; height: 300px;"></pine-widget>

<!-- Responsive with max width -->
<pine-widget src="scene.json" style="width: 100%; max-width: 800px;"></pine-widget>

Self-Hosting

Download pine-widget.min.js and host it yourself:

1. Download from: https://cdn.pinepaper.studio/widget.min.js
2. Host on your server
3. Update script src to your hosted path

<script src="/js/pine-widget.min.js"></script>

Scene Format Reference

The widget accepts two formats:

Template Format (v0.1)

Exported from PinePaper’s “Save as Template”:

{
  "id": "my-template",
  "name": "My Animation",
  "dimensions": { "width": 800, "height": 600 },
  "data": {
    "backgroundColor": "#1a1a2e",
    "items": [
      {
        "type": "text",
        "content": "Hello",
        "position": [400, 300],
        "fontSize": 48,
        "fontColor": "#ffffff",
        "animationType": "pulse"
      }
    ]
  }
}

Scene Format (v0.2)

Exported from “Export Scene”:

{
  "id": "my-scene",
  "name": "My Animation",
  "width": 800,
  "height": 600,
  "background": "#1a1a2e",
  "items": [
    {
      "id": "title",
      "type": "text",
      "content": "Hello",
      "x": 400,
      "y": 300,
      "fontSize": 48,
      "fillColor": "#ffffff",
      "keyframes": [
        { "time": 0, "properties": { "opacity": 0 }, "easing": "easeOut" },
        { "time": 0.5, "properties": { "opacity": 1 } }
      ]
    }
  ],
  "relations": [
    {
      "from": "moon",
      "to": "earth",
      "type": "orbits",
      "params": { "radius": 100, "speed": 0.5 }
    }
  ]
}

Tips

Related

• SVG Export — Web-friendly vector export
• Video Export — MP4 for social platforms
• API Documentation — Full PineWidget API reference