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.
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.
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.
edit HTML pages, visually.
style with CSS, visually.
edit markdown documents.
control logic and behavior, visually.
edit vectors in vector environment.
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.
use HTML boxes to construct your layout
manage and pick images on-the-go
all of your content pieces are HTML5 Semantics.
design with functional HTML forms.
really, everything html has to offer.
apply attributes to everything.
coming sooncreate components, use them everywhere and systemize your design.
coming soonthe 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.
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
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
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.
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!
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.
This paragraph is part of the first section, which has a subheading to help organize the content.
This paragraph is part of the second section, which also has a subheading for organization purposes.
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.
const tryMeBtn = document.getElementById("try_me");
tryMeBtn.addEventListener("click", () => {
window.location.href = "https://rnbw.dev";
});write your own code as part of your design process.
connect anything to your project and edit it while it is running.
import NPM Packages to your project and run them while editing.
you have now learned the basic fundamentals of rnbw. to learn everything about rnbw,please read the rest of manual carefully.