docs: Add XMLUI quickstart guide #42223
Conversation
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
|
Thanks for contributing to Supabase! ❤️ Our team will review your PR. A few tips for a smoother review process:
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@judell is attempting to deploy a commit to the Supabase Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughAdds an XMLUI framework quickstart: a navigation menu entry, two quickstart list items in the Getting Started page, and a new MDX guide with a five-step Supabase + XMLUI tutorial. Changes
Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@apps/docs/content/guides/getting-started/quickstarts/xmlui.mdx`:
- Around line 34-35: Replace the unstable CDN script tag loading
"https://xmlui.org/xmlui.js" with the official distribution: either reference a
versioned local bundle filename like "xmlui/<version>.js" (e.g.,
xmlui/0.9.23.js) so upgrades are controlled, or switch to the npm package by
importing from "xmlui" in your build pipeline; update the script tag or import
accordingly and remove the direct CDN URL to avoid the 30s cache endpoint.
🧹 Nitpick comments (1)
apps/docs/content/guides/getting-started/quickstarts/xmlui.mdx (1)
91-94: Consider using Supabase's standard terminology for the anon key.The placeholder uses
supabasePublishableKey, but Supabase documentation and dashboard consistently use "anon key" orSUPABASE_ANON_KEY. This inconsistency might confuse users who see "anon key" in their Supabase dashboard.📝 Suggested terminology alignment
{ "appGlobals": { "supabaseUrl": "<SUBSTITUTE_SUPABASE_URL>", - "supabasePublishableKey": "<SUBSTITUTE_SUPABASE_PUBLISHABLE_KEY>" + "supabaseAnonKey": "<SUBSTITUTE_SUPABASE_ANON_KEY>" } }This would also require updating the references in
Main.xmlui(lines 62-63) to useappGlobals.supabaseAnonKey.
| <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script> | ||
| <script src="https://xmlui.org/xmlui.js"></script> |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify the XMLUI script URL is accessible
curl -sI "https://xmlui.org/xmlui.js" | head -10Repository: supabase/supabase
Length of output: 398
🌐 Web query:
XMLUI JavaScript library CDN documentation official
💡 Result:
XMLUI’s official docs don’t document an “official CDN URL” for loading the engine. Instead, they show (and recommend) shipping the standalone engine file with your app in a versioned xmlui/ folder and referencing it locally, e.g. <script src="xmlui/0.9.23.js"></script>, and they recommend keeping the version number in the filename so you can control upgrades. [1]
If you’re looking for the “official place” the library is published for distribution, there is also an npm package named xmlui (repo: xmlui-org/xmlui). [2]
Sources:
[1] https://docs.xmlui.org/app-structure
[2] https://www.npmjs.com/package/xmlui/v/0.9.50
Use the official distribution method for XMLUI instead of the CDN endpoint.
The XMLUI official documentation does not recommend loading from https://xmlui.org/xmlui.js. The recommended approach is to bundle the engine locally with a version number in the filename (e.g., xmlui/0.9.23.js) for controlled upgrades. Alternatively, use the npm package (xmlui). The current CDN URL has a short cache-control window (30 seconds) and is not intended for stable production use.
🤖 Prompt for AI Agents
In `@apps/docs/content/guides/getting-started/quickstarts/xmlui.mdx` around lines
34 - 35, Replace the unstable CDN script tag loading
"https://xmlui.org/xmlui.js" with the official distribution: either reference a
versioned local bundle filename like "xmlui/<version>.js" (e.g.,
xmlui/0.9.23.js) so upgrades are controlled, or switch to the npm package by
importing from "xmlui" in your build pipeline; update the script tag or import
accordingly and remove the direct CDN URL to avoid the 30s cache endpoint.
There was a problem hiding this comment.
Although XMLUI is available as an NPM module we want to show that it can be used in a more basic way. This is how we show that on our docs site.
There was a problem hiding this comment.
@judell, thank you for the clarification! That makes perfect sense for a quickstart guide. Using the CDN approach demonstrates the simplest possible way to get started with XMLUI, which is exactly what beginners need. The direct script tag is much more accessible than requiring npm setup and a build pipeline.
I appreciate you showing how it's documented on the XMLUI docs site as well. The CDN approach is the right choice here for the quickstart context.
✏️ Learnings added
Learnt from: judell
Repo: supabase/supabase PR: 42223
File: apps/docs/content/guides/getting-started/quickstarts/xmlui.mdx:34-35
Timestamp: 2026-01-27T23:05:15.115Z
Learning: For XMLUI quickstart guides in the Supabase documentation, prefer the CDN approach (`https://xmlui.org/xmlui.js`) over npm to demonstrate the simplest, most accessible usage pattern for beginners, even though npm installation is available.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
We realize that there should also be cdn.xmlui.org, I've asked for that be made available and will update accordingly, please hold until I confirm that's done. Thanks! Update: Done. |
I have read the CONTRIBUTING.md file.
YES
What kind of change does this PR introduce?
Adds an XMLUI quickstart guide. XMLUI is a declarative UI framework that makes it easy to build data-driven apps. This quickstart shows how to connect an XMLUI app to Supabase and display data from the database.
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.