Welcome 👋!
If you've ever tried building a polished, production-ready WASM UI in Rust, you know the drill: getting your app to feel native often involves duct tape, a prayer to the compiler gods, and a suspicious amount of copy-pasted CSS. And when it comes to wrapping content in a clean, browser-like frame? Forget it, until now.
That's why we're excited to announce Browser RS, the drop-in browser frame component built natively for Rust. It's sleek, it's accessible, it's got style for days, and yes, it even plays nice with Tailwind. Whether you're embedding an iframe, a widget, or just want your app to look like it belongs inside a miniature Chrome tab, Browser RS delivers maximum polish with minimum fuss.
Let's dive in and see why Browser RS is the browser inside your browser you didn't know you needed.
🌐 What Is Browser RS?
Browser RS is a fully customizable browser-frame component built specifically for WASM Frameworks, Rust's powerhouse frontend frameworks. It lets you wrap any HTML content inside a mock browser UI, complete with a header bar, address field, window controls, and optional custom buttons, all while giving you fine-grained control over styling, behavior, and accessibility. Basically, it's like giving your content a tuxedo and sending it to prom.
🚀 Why You'll Love Browser RS
Not all browser frames are created equal. Some are rigid. Others are pure CSS gimmicks. But Browser RS? It's got substance and style. Here's what sets it apart:
- Plug-and-Play Simplicity: Add it to your project in seconds. No dark magic or manual wiring required.
- Full Control: Customize everything, from the close button to the ARIA labels.
- Event-Driven: Hook into user actions like close, maximize, and minimize. It's like window management, but without the OS.
- Accessible by Default: Screen reader support, keyboard nav, ARIA labels, your app's users (and auditors) will thank you.
- Dark Mode Friendly: Browser RS fits in with your Tailwind-based design system, including that moody, stylish dark mode.
Even Ferris the crab gave it claws up 🦀👍.
🔥 Getting Started with Yew
If you're already in the Yew ecosystem, integrating Browser RS is smoother than a fresh cargo build.
Add the Crate
cargo add browser-rs --features=yew
Import the Component
use yew::prelude::*;
use browser_rs::yew::BrowserFrame;
Wrap Your Content
#[function_component(App)]
fn app() -> Html {
let on_close = Callback::from(|_| log::info!("Closed like it's 2003 and your mom needs the phone line"));
html! {
<BrowserFrame url={"https://opensass.org".to_string()} on_close={on_close}>
<p>{ "Here's some magical Yew-powered content." }</p>
</BrowserFrame>
}
}
🧩 Features That Matter
| Feature | Why It's Awesome |
|---|---|
url & placeholder
|
Looks real, works seamlessly, no <iframe> nightmares needed |
on_close / on_minimize / on_maximize
|
Build dynamic, responsive UIs like a pro |
custom_buttons |
Add fun buttons, even a "Launch Ferris" rocket icon 🚀🦀 |
class, style
|
Tailor every pixel to your liking |
| ARIA & keyboard support | Accessible by default, no extra effort required |
| Size & Variant | Choose from small to full screen, minimal to rich |
And let's not forget: it works everywhere. Editors, sandboxes, dashboards, iframes, whatever you're building, it makes it look like it belongs on a browser within a browser, which is almost as cool as Inception.
🎨 Styled to Match
Want that clean, modern look without writing a single line of CSS? Just pass in your Tailwind classes:
<BrowserFrame
url={"https://opensass.org".to_string()}
class={"rounded-xl shadow-xl"}
input_class={"bg-gray-200 text-gray-900"}
container_class={"flex-1 mx-4"}
>
<p>{ "Styled browser frame!" }</p>
</BrowserFrame>
Your designers will think you've leveled up overnight.
🎛️ Full Control via Props
Browser RS comes with a buffet of props, you can style, control, and wire up everything:
-
url,placeholder,read_only -
show_controls,show_address_bar -
on_url_change,on_close,on_minimize,on_maximize custom_buttons- Styling:
class,style,container_class,input_class - Accessibility:
aria_label,aria_describedby - Visual size & variant controls:
size,variant - Full control of internal buttons:
close_*,maximize_*,share_*, etc.
If you want boring, you've come to the wrong crate.
🛠️ Real-World Use Cases
Here's where Browser RS really shines:
-
Interactive Demos: Want to showcase your app with embedded code or tools? Wrap it in a
BrowserFrame. - Developer Tools: Give your in-app dev tools a visual shell.
- Mini-browser Widgets: Use it for previews, sandboxed environments, or even static content.
- Figma-like Interfaces: Great for app builders and drag-n-drop UIs.
And yes, you can make it look like Safari, Firefox, or even Netscape Navigator (if you're that nostalgic).
💬 Final Thoughts
If you're serious about building delightful web apps with Yew and WASM, Browser RS is a no-brainer.
✅ It makes your app look polished without extra design work.
✅ It provides real interactivity through events and dynamic props.
✅ It keeps your app accessible, responsive, and customizable.
✅ It's built by Rust devs, for Rust devs.
Ferris didn't have a browser frame when Rust was born, but if he did, he'd use this one, and probably paint it red 🦀.
opensass
/
browser-rs
🧭 Browsers layouts for WASM frameworks.
🧭 Browser RS
🎬 Demo
| Framework | Live Demo |
|---|---|
| Yew | |
| Dioxus | |
| Leptos | TODO |
📜 Intro
Browser RS is a browser window emulator for Rust-based WASM frameworks like Yew, Leptos, and Dioxus. Designed to wrap embedded content in a mock browser frame, it offers complete control over styling, layout, and interactions.
🤔 Why Use Browser RS?
-
🖼️ Realistic Browser Look: Simulates a browser window with address bar, controls (close, minimize, maximize), and content area.
-
🔩 Highly Configurable: Toggle visibility, customize styles, and control behavior with dozens of props.
-
📟 Accessible by Default: Comes with semantic roles and ARIA attributes for screen readers and keyboard users.
-
⚡ Interactive Hooks: Emit callbacks on user actions like URL change, hover, click, blur, focus, and keyboard events.
-
🎛️ Theming-Ready and Style-Agnostic: Comes with sensible defaults but is easily styled via Tailwind, CSS classes, or inline styles.
Yew Usage
…At Open SASS, we're working tirelessly on making Rust web development extremely easy for everyone.
If you made it this far, it would be nice if you could join us on Discord.
Till next time 👋!
Top comments (2)
This looks awesome! I’m planning to use Browser RS to showcase live demos in my portfolio site. I love how customizable it is and how I can use Tailwind classes for easy styling. Can’t wait to try it out with my next Yew project!
Thanks. Glad to know you liked it 😊!
Yew is a humble, bumble, yet powerful frontend framework that makes building UIs in Rust extremely easy. It's one of the bold pioneers bringing frontend dev to the Rust ecosystem.
At Open SASS, I'm working overtime to make it as easy and accessible as possible. Browser RS is going to pack a ton of features over time; Maybe even a browser emulator inside your browser! For now, it's just a lightweight frame that helps demos look slick and cool.
I'm also working on a bunch of IOS-related components atm. Some handy dandy components are on the way 😎! Stay tuned.
Till next time 👋!