Skip to main content

Lit Framework


Add the following dependencies to integrate the widget into any Lit project:

yarn add @buildwithsygma/sygmaprotocol-widget @buildwithsygma/sygma-sdk-core

Integrating The Widget Into Your Lit Code

Import the sygmaprotocol-widget dependency to add the widget to your existing codebase. Add the custom tag into your render method:

import { LitElement, html } from 'lit'
import { customElement, property } from 'lit/decorators.js'
import '@buildwithsygma/sygmaprotocol-widget'

export class MyElement extends LitElement {
render() {
return html`


declare global {
interface HTMLElementTagNameMap {
'my-element': MyElement

You can also pass properties into the widget to customize its behaviour. See Properties for more.