Developer
Browse topics
Getting Started Overview Quick Start Manifest Reference soon Frontend SDK soon Backend SDK soon
RobinPath Overview
On this page

Getting Started with Custom Applets

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

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

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.

CapabilityWhat it grants
storage:kvKey-value storage scoped to this applet
events:emitLog entries to the activity feed
network:httpMake outbound HTTP requests

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

Next Steps