quick start
betarnbw.dev
v0.1
editrnbw is built around three main parts - the sidebar with all your elements and setting, the design where you see your work come to life, and the code editor. the fun part? when you change something in one area, everything else updates automatically.
change something and the whole project gets updated. here's the best bit - rnbw is prompt-driven, putting command menus at the heart of your experience. mastering these will make you a rnbw whiz in no time.
1.1 jumpstart
projects
create a new project or open an existing one.help
get help, speak with someone, or many.settings
switch modes and configure things.
Title
Description
go to https://rnbw.dev to start the editor. the jumpstart menu will welcome you. click outside the menu to begin using rnbw immediately. you can always hit J to open it up again.
if it's your first time, rnbw will start an empty project. if it's not your first time, rnbw will return to where you left it. you can always do ⌘ ⇧ R to clean rnbw's data and start over.
1.2 files
use the navigation bar to indicate where you are and what you're currently viewing and editing. it is clickable, so if you click on something, it'll show you what's inside. the browser's address bar is always there for you too: https://rnbw.dev/folder/sub-folder/file.html
the navigation bar provides quick access buttons for common actions:
- jumpstart button (emoji icon) - opens command menu
- add button (+) - creates new elements or files
- reload button (rotate) - refreshes current page
- reload button (rotate) - refreshes current page
these actions are always accessible from the navigation, making it easy to perform common tasks without remembering keyboard shortcuts.
jumpstart
add
create new elementsreload
refresh current pagecode
toggle code viewthe working files section shows your recently edited files for quick access. it appears at the top of the file tree and helps you:
- quickly switch between files you're actively working on
- see which files have unsaved changes (marked with a dot)
- maintain context of your current work session
this list automatically updates as you edit different files, keeping your most relevant files readily accessible.
click the project label to see what's inside and navigate between files and folders. find your current file at https://rnbw.dev/folder/file-name.html
unsaved file changes are marked with the dot and can be saved individually. it is highly recommended to use GIT as a version control solution to keep track of changes, as rnbw may modify your code.
rnbw will pop a warning if you try to close it without saving your changes.
1.3 elements
view and manipulate your nodes tree. simply compose your HTML objects visually. drag and drop things.
rnbw has a robust history management system for node actions. each action is stored when you make changes to nodes, whether selecting, adding, deleting, or modifying them.
The Navigator is interactive! Go ahead and click on elements to see them highlighted in the Stage.containers
use HTML boxes to construct your layoutmedia
manage and pick images on-the-gotext and formatting
all of your content pieces are HTML5 Semantics.forms
design with functional HTML forms.everything else
really, everything html has to offer.settings
apply attributes to everything.components
create components, use them everywhere and systemize your design.To select multiple Elements → Use Command-Click (for Mac) and Control+Click (for Windows) to select all of the Elements to be removed in the Navigator.
You can then →
- Hit the Backspace key to remove the elements.
- Drag and then drop them alongside another element
- Cut/Copy, and then Paste them alongside another element.
- Apply and edit Styles combination on multiple Elements at once
To reorder Elements → Drag and drop the Element(s) to its new position.
To hide or show child Elements → Click on the Arrow icon left of the Element.
1.4 settings
customs attributes provide more details and settings for elements.
To add Custom Attribute -> Click on the "+" right to the Settings headline.
To Create your new attribute -> Select common attribute or name the property, and click Enter/elsewhere.
To Create your new attribute -> Select common attribute or name the property, and click Enter/elsewhere.
To Activate your new attribute -> Fill in its value and click Enter/elsewhere.
Your Attribute is now exist and active!
To remove a custom attribute -> Make it inactive, and delete it using the "remove' icon right next to it.
1.5 design
the design is where your design is playing. let's get real - it's already running! that's right, you're editing live. want to test something? you're doing it already. need to resize the browser? just go for it. but here's a neat trick - hit Esc on your keyboard and you'll switch to a clean preview mode.
it's just your website or app, no editing mode distractions, free for you to click around and navigate. want to jump back into editing? hit Esc again and you're right back where you left off. generally, whenever you'll hit ESC on your keyboard, rnbw will close all panels and focus solely on the design.
"The first web browser was also an editor. The idea being that not only could everyone
read content on the web, but they could also help create it. It was to be a
collaborative space for everyone."
Sir Tim Berners-Lee
To Edit Text → Double-click on any text element
Empty container elements are text-friendly! You can add text by double-clicking them too.
Write Something
bold
"wrap" text with the bold elementitalic
"wrap" text with the italic elementspan
"Wrap" text with the Span Elementlink
"wrap" text with the link elementunderline
"wrap" text with the underline elementstrikethrough
"wrap" text with the strikethrough elementnotifications
notifications can come in different styles to indicate their type, and some may include actions to help resolve issues:
- success
- warning - may include fix actions
- error - may include fix actions
- info
1.7 do something
the actions menu provides a one-stop destination for all of the features and functions offered by rnbw. it is the de-facto way of doing things in rainbow.
let's start with the basics, like adding something to your project, previewing it, and editing some underlying code. hit W on your keyboard.
basic
toggle code view/editing on/offother
toggle design panel on/off1.8 search something
hit S to search through your entire project. find files, elements, and content instantly.
search is a powerful way to navigate your project. it helps you quickly locate and jump to any part of your work.
1.8 ask something
hit A to ask rnbw to automate a big chunk of your work using artificial intelligence by your side.
this feature is in development and has yet to be released publicly. we'd love to hear you!
1.9 code
to create a successful software project, design and code must work hand in hand. let's edit some code directly by hitting the C key.
you can freely move between the design, code, or tree. any changes will apply directly to your project and immediately re-render.
"The first web browser was also an editor. The idea being that not only could
everyone read content on the web, but they could also help create it. It was
to be a collaborative space for everyone."
Sir Tim Berners-Lee
const tryMeBtn = document.getElementById("try_me");
tryMeBtn.addEventListener("click", () => {
window.location.href = "https://rnbw.dev"; }
);
editor
write your own code as part of your design process.external code
connect anything to your project and edit it while it is running.congratulations!
you have now learned the basic fundamentals of rnbw. to learn everything about rnbw,please read the rest of manual carefully.