Spline Hana Viewer for Wappler

Embed interactive 2D scenes from Spline Hana into your Wappler projects.

Features

• ✨ Interactive 2D Scenes - Display beautiful, interactive Hana designs
• 🎨 Lightweight - Optimized 2D viewer, smaller than full 3D Spline
• 📱 Responsive - Automatically adapts to container size
• 🔄 Dynamic Content - Data binding support for scene URLs
• ⚡ Fast Loading - Efficient loading from Spline CDN
• 🎯 Event System - React to scene interactions

Installation

Via NPM

npm install wappler-hana-viewer

Via Wappler UI

1. Open Wappler
2. Go to Project Settings → Extensions
3. Add Extension → Enter: wappler-hana-viewer

Usage

Basic Example

<dmx-hana-viewer 
    id="hana1" 
    url="https://prod.spline.design/oLbhqF6SWXxSaOu5-U4w/scene.hanacode"
    width="100%"
    height="600px">
</dmx-hana-viewer>

With Data Binding

<dmx-hana-viewer 
    id="hana1" 
    dmx-bind:url="serverconnect1.data.sceneUrl"
    width="100%"
    height="500px">
</dmx-hana-viewer>

With Events

<dmx-hana-viewer 
    id="hana1" 
    url="https://prod.spline.design/your-scene/scene.hanacode"
    dmx-on:loaded="console.log('Scene loaded!')"
    dmx-on:click="console.log('Scene clicked!')">
</dmx-hana-viewer>

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | id | String | required | Unique identifier | | url | String | required | Hana scene URL (.hanacode) | | width | String | '100%' | Width (px or %) | | height | String | '600px' | Height (px or %) | | show-loading | Boolean | true | Show loading indicator |

Data Output

Access component state via data bindings:

<div>Loading: {{hana1.isLoading}}</div>
<div>Loaded: {{hana1.isLoaded}}</div>
<div>Error: {{hana1.error}}</div>

Events

• loaded - Scene finished loading
• error - Scene failed to load
• click - Scene was clicked

Methods

Call methods via Dynamic Events:

• hana1.reload() - Reload the scene

Getting Your Hana Scene URL

1. Create or open your design in Spline Hana (app.spline.design)
2. Click "Export" → "Code Export"
3. Choose "HTML" or "JavaScript"
4. Copy the URL ending in .hanacode

Example URL format:

https://prod.spline.design/[scene-id]/scene.hanacode

About Spline Hana

Hana is Spline's 2D canvas for creating interactive experiences with states, events, and animations. It's perfect for:

• UI components
• Interactive buttons and cards
• Animated illustrations
• Micro-interactions
• 2D games and experiences

Learn more: https://docs.spline.design/hana

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)

License

MIT

Support

For issues or questions:

• GitHub Issues
• Wappler Community Forum