~7 min read ·TUTORIAL
Your readers copy-paste your code examples. Wouldn't it be better if they could try them live, in the browser, right from your article? Add an "Open in Studio" button with a single script tag. No build, no local setup, no dependencies.
Bridge is how Studio reaches your audience. If you write React tutorials, teach courses, sell component templates, or build UIs for clients — one button turns your static code examples into live, editable Studio workspaces. This is how you set it up.
FOR PARTNERS
This is how partners bring Studio to their audience. Add one line of code and your tutorials, courses, or templates get a visual IDE built in. Your readers learn better. Your students skip setup. Your templates sell themselves. Your clients sign off faster.
Why Bridge?
You already have great content, courses, or templates. Bridge makes them more valuable with zero effort on your side:
- For Tutorial & Content Partners: Transform static snippets into live, tweakable playgrounds. Readers experiment instead of just reading. No hosting, no infra — it's free and maintenance-free.
- For Template Authors: Offer buyers a "Try Before You Buy" visual preview. They visually edit layouts without touching React code, drastically reducing support tickets. Templates sell themselves.
- For Instructors & Bootcamps: Your students get free Pro for 1 month per cohort. They skip npm install, environment hell, localhost issues. Jump straight into visual React learning. Your course feels more premium.
- For Agencies: Co-design UIs with clients in real-time. Visual edits immediately generate clean, PR-ready React code. Sign-offs faster, less back-and-forth.
One button. Your audience gets a better experience. You get more value from the work you've already done.
Three integration paths
Pick one based on your site's tech stack:
Path 1: HTML Form (Simplest)
Works on static blogs, markdown CMS, or anywhere you can paste raw HTML. Just a form with a button.
Step 1: Copy this HTML
<form action="https://studio.crossui.com/public/bridge.php" method="POST" target="_blank">
<textarea name="code" style="display:none;">
import React from 'react';
import { Button } from '@mui/material';
export default function Demo() {
return <Button variant="contained">Hello!</Button>;
}
</textarea>
<input type="hidden" name="ref" value="YOUR_REF_CODE">
<button type="submit">Open in CrossUI Studio</button>
</form>
Step 2: Customize the button (optional)
Style it to match your site. It's just a standard form button — use your own CSS. Add an origin parameter if you want to track which page sends traffic (helpful for knowing what's working).
<input type="hidden" name="origin" value="my-react-tutorial-page">
Step 3: Paste the React code
Replace the import React... block with your actual component. That's it. You're done.
Styling? Add CSS to the button element. It's just a standard form button. You can style it however you want.
Path 2: JS SDK (Most Automatic)
For documentation sites or blogs where you have many code blocks. The SDK automatically finds them, injects buttons, and handles the rest.
Step 1: Add the script
<script src="https://studio.crossui.com/public/CrossUI-Bridge-Client.js"></script>
Place it near the end of your <body> tag.
Step 2: Initialize with your config
<script>
CrossUIBridge.init({
selector: 'pre code.language-jsx', // Target JSX blocks
ref: 'YOUR_REF_CODE', // Your partner code
origin: 'my-blog' // Optional: analytics
});
</script>
The script scans your page for code blocks matching that CSS selector and adds a button to each one.
Markdown blog? Most markdown renders code as <pre><code class="language-jsx">...</code></pre>. Set selector: 'pre code.language-jsx' (or your markdown's class). The SDK does the rest.
Path 3: Server-Side (Most Flexible)
For premium template marketplaces or enterprise sites where you want to validate the user's purchase before showing them the code. Your backend receives the request, checks the user's access, and if OK, injects your partner code before redirecting to Studio.
See the GitHub bridge folder for full examples in Node, PHP, C#, and Java.
What do your readers / students / clients get?
One click. Zero setup. They land in Studio with full IDE power:
- Instant feedback: Edit code, see changes live on the canvas in real-time (SCD — Synchronized Code & Design)
- No environment hell: No npm install, no localhost, no waiting. Works in any browser, on any device.
- Visual + Code: Drill down any layer in the component tree, edit styles visually, tweak props, understand the structure.
- Guest access: No sign-up required. They get the full IDE experience immediately.
Result: Your readers learn better. Your students skip friction. Your templates show themselves. Your clients buy with confidence.
Ready to bring Studio to your audience?
Three easy steps:
- Pick your integration path — HTML Form (simplest), JS SDK (most automatic), or Server-Side (most control)
- Read the full guide: See the GitHub bridge folder for all three paths with code examples in Node, PHP, C#, and Java.
- Apply to become a partner: Fill out the partnership form and we'll get back to you in 48 hours with setup docs and everything you need.
Bring Studio to your audience.
Make your content interactive. Make your courses friction-free. Make your templates sell themselves.
About CrossUI Studio — A visual IDE for React & MUI. Code and canvas stay in two-way sync on the same AST: edit code and the canvas updates live; click an element on the canvas, edit its props visually, and the code changes with a surgical one-line diff. No build, no localhost — it runs in the browser, works on your real Git repo or a local folder, with no vendor lock-in.
Top comments (0)