Getting Started with Custom Applets

Build custom applets for RightPlace using HTML, CSS, and JavaScript.

Getting Started

Custom applets extend RightPlace with new functionality. An applet is a self-contained package with a frontend (HTML/JS rendered in an iframe) and an optional backend (Node.js process).

What You Can Build

API dashboards and monitoring tools
Custom CMS integrations
Data visualization panels
AI-powered tools
Anything that runs in a web browser

Applet Structure

A minimal applet has two files:

my-resource/
  resource.json       # Manifest (required)
  dist/
    index.html        # Frontend entry (required)

resource.json

{
  "id": "com.yourname.my-resource",
  "name": "My Resource",
  "version": "1.0.0",
  "apiVersion": 1,
  "resourceType": "my_resource",
  "category": "Tools",
  "color": "#3b82f6",
  "author": "Your Name",
  "capabilities": [],
  "frontend": {
    "entry": "dist/index.html"
  }
}

dist/index.html

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: var(--rp-font-family);
      background: var(--rp-bg);
      color: var(--rp-fg);
      margin: 0;
      padding: 16px;
    }
  </style>
</head>
<body>
  <h1>Hello from My Applet!</h1>
  <script type="module">
    import { createResourceClient } from "https://esm.sh/@rightplace/sdk";
    
    const rp = createResourceClient();
    await rp.ready();
    
    document.querySelector("h1").textContent = 
      `Hello! Applet ID: ${rp.resourceId}`;
  </script>
</body>
</html>

Development Workflow

1. Link your applet

During development, link your applet folder to RightPlace:

# In the app's Dev Home page, use the "Link Resource" button
# Or via CLI:
rightplace-cli resource link /path/to/my-resource

2. Use a dev server

Add a dev section to your manifest for hot-reload:

{
  "dev": {
    "frontendUrl": "http://localhost:5173"
  }
}

3. Add to a project

Once linked, your applet appears in the “Add Applet” picker. Add it to any project to start testing.

Capabilities

Applets request capabilities in their manifest. Users see these at install time.

Capability	What it grants
`storage:kv`	Key-value storage scoped to this applet
`events:emit`	Log entries to the activity feed
`network:http`	Make outbound HTTP requests

More capabilities are being added - see the API Reference section.

Next Steps

Manifest Reference - full manifest schema
Frontend SDK - iframe communication API
Backend SDK - Node.js backend API
HTTP API - make HTTP requests
Storage API - key-value storage