v1.1.0 — Now Available

Vue-style SFCs,
built for React.

Colocate script, template, and styles in a single .rsfc file. TypeScript-first with CSS Modules — zero extra config needed.

GET STARTEDVIEW ON GITHUB
1<<script setup lang="ts">
2import { useState } from 'react'
3const [count, setCount] = useState(0)
4</script>
5
6<template>
7 <button
8 className={styles.btn}
9 onClick={() => setCount(count + 1)}
10 >
11 Clicked {count} times
12 </button>
13</template>
14
15<style module>
16.btn { background: #42b883; }
17</style>
ENGINEERING SPECS

Precision Built Core.

bolt

Single File

Script, template, and styles live together in one .rsfc file. No scattered imports — everything your component needs in one place.

LEARN MOREarrow_forward
layers

CSS Modules

Scoped styles via <style module>. The styles object is auto-injected — zero class name collisions, ever.

LEARN MOREarrow_forward
terminal

Vite HMR

Hot module replacement out of the box. Style-only changes update without re-rendering the component tree.

LEARN MOREarrow_forward
SYNTAX

Clean, familiar syntax.

Three blocks. One file. Inspired by Vue SFCs, built for React.

Counter.rsfc
1import { useState } from 'react'
2
3// Declare state directly —
4// no wrapping function needed.
5const [count, setCount] = useState(0)
6const double = count * 2

Quick Installation

01

Install the core engine

Bootstrap your environment with the Vite plugin and React adapter.

npm install -D @g-casau/rsfc-vite-plugin @vitejs/plugin-react
02

Register the plugin

Enable .rsfc support in your Vite configuration file.

import rsfc from '@g-casau/rsfc-vite-plugin' // plugins: [rsfc(), react()]
TYPE DECLARATIONS
1declare module "*.rsfc" {
2 import type { FC } from "react"
3 const Component: FC
4 export default Component
5}

Add rsfc.d.ts to your project root for full TypeScript support.

VS CODE EXTENSION

First-class editor support.

Download the .vsix and install it in VS Code via Extensions → Install from VSIX for a full-featured RSFC development experience — syntax highlighting, IntelliSense, live diagnostics, and more.

downloadDownload .vsix
palette
GRAMMAR

Syntax Highlighting

Embedded grammars per block — TSX in templates, TypeScript in scripts, SCSS or CSS in styles, Markdown in docs.

error_outline
LSP

Live Diagnostics

Parse errors are surfaced inline as you type, directly from the RSFC compiler — no build step needed.

psychology
TSSERVER

TypeScript IntelliSense

Full type checking via a tsserver plugin. Props, imports, and component exports all resolve correctly.

flash_on
SNIPPETS

Smart Snippets

Type <script, <template or <style and press Tab to scaffold any block instantly with proper closing tags.

account_tree
OUTLINE

Document Outline

All RSFC blocks appear in the Explorer outline panel. Fold them individually and navigate at a glance.

info
HOVER

Hover Documentation

Hover over any block to see its kind, language, and declared attributes in a Markdown tooltip.