rnbw.dev

beta

1 quick start

v0.1
2022 december

rnbw is built around three main parts - the sidebar with all your elements and setting, the stage 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

search
find and go to all of your projects and files.
projects
create a new project or start a new one.
help
get help, speak with someone, or many.
settings
switch modes and configure things.
Jumpstart...
Projects
New
N
Open
S
Recent
Project
Project
Project
Help
Guide
Support
Community
Settings
Theme/ System
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.

Folder
/ File
HTML
Head
Body
Settings
Styles

1.3 files

click the project label to navigate between files and folders. the files panel will auto-collapse when you click elsewhere. click the project label to see all of its 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.

Folder
Stylesheet
Page
Script
Component
Folder
Stylesheet
Script
HTML

edit HTML pages, visually.

CSS

style with CSS, visually.

markdown

edit markdown documents.

JavaScript

control logic and behavior, visually.

SVG

edit vectors in vector environment.

1.4 elements

view and manipulate your nodes tree. simply compose your HTML objects visually. drag and drop thing.

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.

Folder /.../
Page
Image
Div
Element
Logo
Element
Element
Element
Settings
Styles
containers

use HTML boxes to construct your layout

media

manage and pick images on-the-go

text 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.

coming soon
components

create components, use them everywhere and systemize your design.

coming soon

1.5 stage

the stage is where your design is playing. let's get real - there's no 'run' button here because, guess what? 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 R 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 R 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 stage.

"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

1.6 add something

let's add something. the add menu let you add different things in different contexts - you can only add what is possible as a time, like files or specific html elements.

to keep your design process simple and focused, adding a new object initially comes with only the necessary placeholder data. you can then customize it with your own data and settings

Add something...
Files
Page
Script
Elements
Div
Text
Image
Link
Recent
Stylesheet1/Style1
Component 1
images/image1.png
Description

congrats, you've added your first elements! there's another way of adding things you should know about.

rainbow is also a text editor - you can hit a forward slash / while in editing text for an inline editing experience

Folder /.../
Page
Div
Element
Logo
Element
Settings
Styles
"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

/

Page
Div
Span
Image
Link
Stylesheet1/Style1
Component 1
images/image1.png

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.

Do something...
Project
Add
A
Code
C
Run
R
Design
/
Publish
P
Share
O
Actions
Cut
Copy
Paste
Other
Create component
Remove unused styles(28)
Copy class names
add
add something to your project
code
toggle code view/editing on/off
run
toggle live preview on/off
design
toggle design panel on/off
publish
publish your website to the world
share
collaborate with your teams
coming soon

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!

Blog Post Title

Posted on April 30, 2023 by Author Name

This is the first paragraph of the blog post. It should be engaging and give readers an idea of what to expect in the rest of the article.

Subheading 1

This paragraph is part of the first section, which has a subheading to help organize the content.

Subheading 2

This paragraph is part of the second section, which also has a subheading for organization purposes.

Ask something...
Generate
Continue
Create
Explain
Brainstorm
Edit
Change tone
Improve Writing
Simplify
Recent
Create a blog post layout
Create a pricing section with the active components libraries

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 stage, code, or tree. any changes will apply directly to your project and immediately re-render.

Folder /.../
Page
Image
Div
Element
Logo
Element
Element
Element
Settings
Styles
Style1
Style2
Width
24px
Display
Flex
Position
Relative
"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.

NPM

import NPM Packages to your project and run them while editing.

congratulations!

you have now learned the basic fundamentals of rnbw. to learn everything about rnbw,please read the rest of manual carefully.