Your design system executable as a server side renderer

Each design system is available in 4 builds:

Dilla Web Dilla Edge
Prod builds n/a Recommended
Dev builds n/a Only for dev

Dilla Edge act as an universal plugin system. WebAssembly allows Dilla to be plugged into most of the technological stacks without the risks and costs that typically come with integrating add-ons.

Powered by Extism.

Logo of python

Python 3

A high-level, general-purpose programming language.

Install instruction: https://github.com/extism/python-sdk

Using pip:

pip install extism==1.0.0


                              

Try in Code Sandbox

Documentation about the Render API.


                              

Try in Code Sandbox

Documentation about the Describe API.

Logo of nodejs

node.js

A back-end JavaScript runtime environment.

Compatibility
  • Node.js: v18+ (with --experimental-global-webcrypto); v20 with no additional flags
  • Deno: v1.36+
  • Bun: Tested on v1.0.7; Bun partially implements WASI.

Install instruction: https://github.com/extism/js-sdk

Assume package type="module"

npm install @extism/extism


                              

Try in Code Sandbox

Documentation about the Render API.


                              

Try in Code Sandbox

Documentation about the Describe API.

Logo of go

Go lang

Go is an open source programming language that makes it simple to build secure, scalable systems.

Install instruction: https://github.com/extism/go-sdk

go get github.com/extism/go-sdk


                              

Try in Code Sandbox

Documentation about the Render API.


                              

Try in Code Sandbox

Documentation about the Describe API.

Logo of php

PHP 8

A general-purpose scripting language geared toward web development.

Install instruction: https://github.com/extism/dotnet-sdk

composer require extism/extism:latest

        <?php

declare(strict_types=1);

require 'vendor/autoload.php';

use Extism\Plugin;
use Extism\Manifest;
use Extism\PathWasmSource;
use Extism\UrlWasmSource;

$payload = \json_encode([
  '@component' => 'alert',
  "@variant" => "info",
  'heading' => 'Hello from PHP!'
]);

$url = "https://data.dilla.io/extism/bootstrap_5/bootstrap_5.wasm";
$wasm = new UrlWasmSource($url);
// Or local file
// $path = "bootstrap_5.wasm";
// $wasm = new PathWasmSource($path);

$manifest = new Manifest($wasm);
$plugin = new Plugin($manifest, true);

$output = $plugin->call("render", $payload);

$result = json_encode(json_decode($output), JSON_PRETTY_PRINT);

print $result;
      

Documentation about the Render API.

        <?php

declare(strict_types=1);

require 'vendor/autoload.php';

use Extism\Plugin;
use Extism\Manifest;
use Extism\PathWasmSource;
use Extism\UrlWasmSource;

$request = "component::card";

$url = "https://data.dilla.io/extism/bootstrap_5/bootstrap_5_dev.wasm";
$wasm = new UrlWasmSource($url);
// Or local file
// $path = "bootstrap_5_dev.wasm";
// $wasm = new PathWasmSource($path);

$manifest = new Manifest($wasm);
$plugin = new Plugin($manifest, true);

$result = $plugin->call("describe", $request);

print $result;
      

Documentation about the Describe API.

Logo of java

JAVA

A general-purpose high-level, class-based, object-oriented programming language.

                <!-- Install Extism lib https://github.com/extism/java-sdk?tab=readme-ov-file#install-the-extism-runtime-dependency -->
<!-- Add extism sdk for java to your build -->
<dependency>
  <groupId>org.extism.sdk</groupId>
  <artifactId>extism</artifactId>
  <version>1.0.0</version>
</dependency>
<!-- Suggested for json manipulation -->
<dependency>
  <groupId>org.json</groupId>
  <artifactId>json</artifactId>
  <version>20231013</version>
</dependency>

              


                
                

Documentation about the Render API.


              
                

Documentation about the Describe API.

Logo of dotnet

.NET

.NET is a secure, reliable, and high-performance application platform. C# is the programming language for .NET. It's strongly-typed and type-safe and has integrated concurrency and automatic memory management.

Install instruction: https://github.com/extism/php-sdk

dotnet add package Extism.runtime.all
dotnet add package Extism.Sdk


                
                

Documentation about the Render API.


              
                

Documentation about the Describe API.

Logo of ruby

Ruby

Ruby is an interpreted, high-level, general-purpose programming language which supports multiple programming paradigms.

Install instruction: https://github.com/extism/ruby-sdk

Using gem:

gem install extism


                
                

Documentation about the Render API.


              
                

Documentation about the Describe API.