XRA

Comments Admin - Let clients edit the site without touching at all

Start cloning
Talk to us
  • Live preview
  • Customisable
  • Accessible
was created in 2021
Jonathan
Jonathan 8m ago
@Alicia Is this correct?
Alicia
Alicia now
Can you double-check this @XRA AI ?
XRA AI
XRA AI 2m ago
Yes, that sentence is correct. The date matches the doc metadata.
Nimesh
Nimesh 36m ago
00:46 Can we remove the reverb here?
XRA AI
XRA AI 12m ago
00:46 I can suggest a dry mix preset for that section if you’d like.
Olivier
Olivier 16m ago
We should change this into a circle.
👍 3
✅ 1
XRA AI
XRA AI 8m ago
Good call. A circle would match the style guide better.
Chris
Chris 2m ago (edited)
Can we make the logo bigger?
😅 6
XRA AI
XRA AI now
The header logo is currently 24px. Bumping it to 32px would keep it within the 8px grid.
All changes
Steven
Steven 16m ago
00:10 Can we switch these shots?
Pierre
Pierre 5m ago
00:42 This looks a bit off. Look at the attached screenshots.
XRA AI
XRA AI now
The color grading at 00:42 differs from the previous shot. Adjusting the exposure should help maintain consistency.
Vincent
Vincent 2m ago
01:12 I love the color grading! 👌
XRA

Flexible -
Shape it to the site

Every string the refine stage found becomes a named slot, grouped by page and section, editable in the admin without a deploy.

Browse the factory 
{  "threadId": "th_aFc3G9t2HvNkR8PqO_zU5L",  "metadata": {    "quote": "Which one?"    "resolved": false,  }}
        
{  "threadId": "th_X7m9R4_p5qOzE1VZ3JkY6u",  "metadata": {    "shape": "circle",    "x": 720,    "y": 142  }}
        
{  "threadId": "th_dOqjuyEV1ZR_A3k2Yk4hN",  "metadata": {    "time": 36    "priority": "important",  }}

Themeable -
Match the brand without a rebuild

Colours, radius and type are theme tokens. Change them in the admin and the whole clone follows.

Stacy
Stacy 4h ago

@ Marc This looks great!

Marc
Marc 2h ago

@ XRA AI Could you check if our accent and radius values follow our design guidelines?

XRA AI
XRA AI 1h ago

Yes, these values align with the design system. The --lb-radius , not --lb-accent variables provide good flexibility for brand customization.

Stacy
Stacy now

Perfect, thanks!

Reply…

Theme
Border radius
Accent color

Theme tokens - Make it your own

Tokens drive every surface, border and accent — no component edits needed.

Output

Components - Readable output

The refine stage emits real Astro components with real names — the file you open is the section you saw on the page.

Output 
import { cn } from "src/utils/cn";import { Suspense } from "react";import {  Comment as CommentPrimitive,  Timestamp as TimestampPrimitive,} from "xra/slots";import { User } from "./User";
export function Comment({ comment, className, ...props }) {  return (    <div className={cn(className, "p-4")} {...props}>      <div className="flex items-center gap-3">        <span className="font-semibold">          <Suspense fallback={comment.userId}>            <User userId={comment.userId} />          </Suspense>        </span>        <TimestampPrimitive          date={comment.createdAt}          className="text-sm text-gray-500"        />      </div>      <CommentPrimitive.Body        className="prose mt-3"        body={comment.body}        components={{          Mention: ({ userId }) => (            <CommentPrimitive.Mention className="font-semibold text-blue-500">              @              <Suspense fallback={userId}>                <User userId={userId} />              </Suspense>            </CommentPrimitive.Mention>          ),        }}      />    </div>  );}

Webhooks -
Know when the site changes

Fire a webhook whenever a slot, media item or theme token changes — rebuild, notify, or sync somewhere else.

Output

Every page in this admin was generated by the refine stage. The content you are editing is the site itself — slots, media and theme, backed by your own database.

Dev Shekhawat XRA admin, generated at wire time

Designed for developers

The admin ships with the clone. Nothing extra to set up.

Start cloning
Read the docs 
import "xra/admin.css";import { Composer, Thread } from "xra/admin";import { useThreads } from "./site.config";
function Room() {  const { threads } = useThreads();  return (    <div>      {threads.map((thread) => (        <Thread key={thread.id} thread={thread} />      ))}      <Composer />    </div>  );}

Open‑source examples -
Explore our examples

  • The sections editor in the XRA admin panel

    Sections editor - Included

  • The orders list in the XRA admin panel

    Shop and orders

  • The form inbox in the XRA admin panel

    Form inbox - Included

Point XRA at a URL and get the codebase back

Start cloning
Talk to us