Explore HTML and CSS with PageRIJ
Build a page, change its styling and see what happens. PageRIJ brings code editors, interactive controls, live output and explanations together in a compact browser-based workspace, designed for a laptop or desktop.
The Free workspace lets you explore real HTML and CSS without an account. You can also enter or paste SVG markup; SVG authoring does not depend on a dedicated set of buttons.
Write code directly—or build it with controls
Combine typing with button-driven HTML and CSS input. Build HTML structures, wrap selected content in tags and adjust styling while keeping direct access to your code. Use the controls to explore unfamiliar options, then type when you already know what you want.
See changes as you make them
The output updates as you edit, making the relationship between code and appearance visible. Change a spacing value, try a different layout or alter the HTML structure and inspect the result as you work.
Explore the choices for a CSS property
Choose a CSS property to bring its relevant value choices and controls into view. Rather than remembering every value in advance, explore the options and see what they do to your page.
Adjust one or two numbers with interactive sliders
Select one or two integers in the HTML or CSS editor and adjust their values with a one-dimensional or two-dimensional slider. Watch the output change as you move the control, exploring individual values or combinations without repeatedly deleting and retyping numbers.
Discover HTML attributes in context
In attribute-input mode, hover over an opening tag to see attributes you can insert. Hover over an attribute for an explanation, or its value to explore available choices. The guidance takes account of the element: for input elements, relevant choices and explanations also adapt to the input type.
This brings attribute discovery and editing together where you are working, helping you understand what an attribute is for as well as how to add it.
Connect the visible page to its HTML
Hover over an element in the output to highlight its corresponding HTML and bring it into view in the editor. Locate the code behind a visible part of the page without searching through the whole document.
Watch demonstrations operate the actual app
The built-in demo engine demonstrates features directly in the live workspace—not in a video. You see the real editors, controls and output working together, making it easier to understand both an action and its result.
Understand how the browser interprets your HTML
The browser can interpret your markup differently from the way you intended. PageRIJ provides feedback on differences between your HTML and the structure the browser produces, helping you notice and investigate those changes.
Keep references within reach
Open built-in explanations of HTML elements as you work, with a CSS selector guide also available. Use the references to investigate a feature, then return to experimenting with it in your page.
You can also browse the HTML reference pages and CSS selector guide independently of the workspace.
Use a compact, adaptable workspace
The workspace changes shape as you use its panels, keeping editing tools close at hand while leaving room to inspect the output. Bring the controls you need into view without permanently filling the screen with every available option.
Practise with guided challenges and progress feedback
Optional paid educational material uses PageRIJ’s distinctive interface for practical HTML and CSS challenges. Compare your output with a reference and use visual comparison controls to investigate differences.
The build-progress histogram shows how your work is progressing, with built-in tolerances and different levels of strictness. It helps you identify what is complete and what still needs attention, rather than offering only an exact-match result.