Skip to main content

Welcome to Refract

Welcome to Refract 👋 This page will give you an introduction to 80% of the Refract concepts that you will use on a daily basis.

Refract Logo

tip

To better understand Refract, you only need a solid grasp of JavaScript, HTML, and CSS.
If you’re comfortable with these basics, you’re ready to dive in.

Learn how to integrate Refract into your project quickly and efficiently. With just a few steps, you can have a basic setup running and start building interactive UIs immediately.

What is Refract?​

Refract is a React-inspired JavaScript framework designed to simplify how you manage state, logic, and components in your applications. It builds on top of standard JavaScript concepts and introduces a refraction-based model for predictable state flow, composability, and reactivity.

Here is a minimal example:

import { createApp, ref } from "vue";

createApp({
	setup() {
		return {
			count: ref(0),
		};
	},
}).mount("#app");

The above example demonstrates two of Refract’s core ideas:

  • Declarative Components: Instead of manually updating the DOM, you describe what the UI should look like, and Refract handles the updates.

  • Refractions: A powerful state primitive that keeps track of values, automatically notifying components when they change.

You may already have questions — don’t worry. We’ll cover every detail in the rest of this documentation. For now, just keep reading to get a high-level understanding of what Refract offers.

This documentation assumes basic familiarity with HTML, CSS, and JavaScript. If you’re totally new to frontend development, it may help to brush up on those fundamentals first.

The lightweight Library to build scalable UIs​

Refract is more than just a way to build UIs it’s designed to adapt to a wide range of use cases. Depending on your project, you can use Refract to:

  • Add interactivity to static HTML pages without a build step

  • Create reusable, composable components

  • Build full single-page applications (SPAs)

  • Manage complex state in large-scale apps

  • Extend functionality with optics, effects, and derived state

The beauty of Refract is its incremental adoptability. You can start small and scale up as your needs grow. Whether you’re experimenting with a tiny widget or building a production-ready app, the same core concepts will apply.

This is the unique feature of refract, it grows with you, adapts to your project, and makes state management clear, predictable, and scalable.

Getting Help​

Submit an Issue​

If you encounter a bug or have a feature request, you can submit an issue on the Refract GitHub repository.

Join the Community​

Connect with other Refract developers, share ideas, and get help via the official discussion forums and community channels.

  • join the Discord Community - Chat with other Refract users and contributors
  • GitHub: github.com/refract-js/refract - Source code, issues, and contributions

Read the Docs​

This documentation is your go-to resource for learning Refract. It covers everything from basic concepts to advanced techniques, complete with examples and best practices. Start with the Getting Started section to set up your first Refract project, then explore the Core Concepts to deepen your understanding. Happy coding with Refract! 🚀

Next Steps​

  • Installation - Learn how to set up a new Refract project from scratch.
  • Quickstart Guide - Follow a step-by-step tutorial to create your first Refract component.