The Element SDK is in beta and not yet publicly released — APIs may change without notice.

Overview

Build custom React-based board elements with defineElement — the same API used by every built-in element

The Element SDK is the authoring surface for Internote board elements. It lets you build custom interactive elements — animated visualisers, quiz widgets, simulations, anything — as React components, using the same API that powers every built-in element on the platform.

A Minimal Element

Every element is declared with defineElement. The render function is a React component — hooks, state, effects and refs all work without any special machinery.

import { defineElement, useFade } from '@internote/element-sdk'

export default defineElement({
  kind: 'callout',
  category: 'inline',
  animation: { fade: true },
  render(props, api) {
    const fade = useFade(api.element.animation)
    return (
      <p className={fade.className} style={fade.style}>
        {api.element.body}
      </p>
    )
  },
})

import { defineElement, useFade } from '@internote/element-sdk'

export default defineElement({
  kind: 'callout',
  category: 'inline',
  animation: { fade: true },
  render(props, api) {
    const fade = useFade(api.element.animation)
    return (
      <p className={fade.className} style={fade.style}>
        {api.element.body}
      </p>
    )
  },
})

tsx

Read-only

import { ElementRegistry } from '@internote/element-sdk'
import calloutDef from './callout'

ElementRegistry.register(calloutDef)

import { ElementRegistry } from '@internote/element-sdk'
import calloutDef from './callout'

ElementRegistry.register(calloutDef)

TypeScript

Read-only

Package Exports

Everything is exported from the package root. Three additional subpaths are available for code-splitting:

// Root — everything
import { defineElement, useFade, Stack } from '@internote/element-sdk'

// Animation module only
import { useFade, useDraw, useMorph } from '@internote/element-sdk/animation'

// UI primitives only
import { Stack, Text, Button, Icon } from '@internote/element-sdk/ui'

// Rich text utilities
import { renderRichText } from '@internote/element-sdk/utils'

// Stylesheet (no JS — import once in your host)
import '@internote/element-sdk/styles'

// Root — everything
import { defineElement, useFade, Stack } from '@internote/element-sdk'

// Animation module only
import { useFade, useDraw, useMorph } from '@internote/element-sdk/animation'

// UI primitives only
import { Stack, Text, Button, Icon } from '@internote/element-sdk/ui'

// Rich text utilities
import { renderRichText } from '@internote/element-sdk/utils'

// Stylesheet (no JS — import once in your host)
import '@internote/element-sdk/styles'

TypeScript

Read-only

Categories & defineElement

Inline, hybrid, and environment elements — and the defineElement authoring surface

The ElementApi

What every render function receives — animation, storage, assets, params, and more

Attribute Schemas

Declare typed attributes and get resolved props in your render function automatically

Animation

useFade, useDraw, and useMorph — integrate with the cue timeline

Storage

Persist per-element state across sessions with api.storage