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

Getting Started with Custom Resources

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

Getting Started

Custom resources extend RightPlace with new functionality. A resource 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

Resource Structure

A minimal resource 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 Resource!</h1>
  <script type="module">
    import { createResourceClient } from "https://esm.sh/@rightplace/sdk";
    
    const rp = createResourceClient();
    await rp.ready();
    
    document.querySelector("h1").textContent = 
      `Hello! Resource ID: ${rp.resourceId}`;
  </script>
</body>
</html>

Development Workflow

During development, link your resource 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 resource appears in the “Add Resource” picker. Add it to any project to start testing.

Capabilities

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

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

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

Next Steps