Gallery

Explore example implementations.

This page integrates all demos directly in the documentation.

Advanced tooltips

Attach native, custom or click-triggered tooltips to symbols with Opentip while keeping the SBOL blocks unchanged.

View source on GitHub

Simple tooltip
(hover me !)

Custom tooltip
(hover me !)

Fancy tooltip
(click me !)

Drag & drop construct editor

Compose constructs by dragging parts from an inventory into a sequence container. The example combines SBOL blocks with Dragula for quick experimentation.

View source on GitHub

INVENTORY

promoter 1
promoter 2
gene 1
gene with a very long name
terminator 1
terminator 2

CONSTRUCT

Text-based construct editor

Define combinatorial assemblies from text, enrich input with part suggestions, then render a full construct view on demand.

View source on GitHub

CONSTRUCT DESCRIPTION

insulator ; EcoRI ; p1 , p2 ; bla , ble ; t1 ;

SCHEMA OF THE CONSTRUCT

Email embedding

For email delivery, embed the generated standalone stylesheet directly in the HTML message and reuse the same SBOL markup in the body.

View source on GitHub

Hi there! Here is your construct:

rbs 1

acs

PNG rendering

Use an HTML renderer such as wkhtmltoimage to convert SBOL constructs into raster output. The helper function builds the HTML, injects the CSS and crops the result automatically.

View source on GitHub