Custom Pane Demo - No Build Step Required

How It Works

1

Load mashlib

Include mashlib.min.js from CDN - no npm or bundler needed

2

Define Your Pane

Write a plain JS object with name, label, and render functions

3

Register It

Call panes.register(yourPane) - that's it!

4

Browse Data

Your pane appears as a view option for matching resources

The Code

// Define a custom pane - pure JavaScript!
const myPane = {
  name: 'hello-pane',
  icon: 'https://solidos.github.io/solid-ui/src/icons/noun_547570.svg',

  // When should this pane be shown?
  label: function(subject, context) {
    return "Hello View"
  },

  // Render the pane content
  render: function(subject, context) {
    const div = context.dom.createElement('div')
    div.innerHTML = `
      <h3>Hello from Custom Pane!</h3>
      <p>Viewing: ${subject.value}</p>
    `
    return div
  }
}

// Register it - no build step!
panes.register(myPane)

Live Demo

Resource URI

Click "Register Custom Pane" then "Load Resource" to see it in action

Registered Panes

Tip: Custom panes appear alongside built-in panes. Users can switch between views!

Advanced: Dynamic Pane Loading

You can even load panes dynamically from external files:

// Load a pane from an external URL
async function loadExternalPane(url) {
  const module = await import(url)
  panes.register(module.default)
}

// Example: Load from your Pod!
loadExternalPane('https://you.solidcommunity.net/public/panes/weather-pane.js')

// Or from GitHub Pages
loadExternalPane('https://your-org.github.io/custom-panes/chart-pane.js')

This means you can develop panes separately, host them anywhere, and load them on demand - all without any build step or transpiler!