DEV Community: Dilane3

Rasengan.js 2.0 is stable

Dilane3 — Sat, 24 Oct 2026 20:37:08 +0000

Two months ago I shipped the Rasengan.js 2.0 beta and asked people to break it. They did, and today Rasengan.js 2.0 is stable.

Rasengan.js is a full-stack React framework built on Vite and React Router: file-based routing, SSR, static generation and SPA mode, with a backend story that now lives in the same project.

npx create-rasengan@latest

Here's what changed in 2.0.

A core built on web standards

The dev server and the production request handler used to run on Express. In 2.0 they run on Futon, a small HTTP runtime that works directly with the standard Request and Response objects, the same ones browsers, Bun, Deno and Cloudflare Workers already use. Server-side rendering moved from Node streams to Web Streams along with it.

You don't change anything in your pages or layouts. What you get is a core that isn't tied to Node anymore, which is what makes the next two sections possible.

API routes next to your pages

Backend endpoints can live inside your app, under src/app/_api/. Folders map to URL segments, the same way page routing works, and each HTTP method is a named export:

// src/app/_api/users/[id].route.ts
import { json, notFound } from 'rasengan/server';
import type { Context } from 'rasengan/server';

export async function GET(ctx: Context) {
  const user = await findUser(ctx.params.id);

  if (!user) {
    return notFound('User not found');
  }

  return json(user);
}

That file is GET /api/users/:id. A middleware.ts in any folder applies to every route below it. No separate server, no extra deployment target.

Node.js, Bun or the edge

A new runtime option tells the build what it targets:

// rasengan.config.js
import { defineConfig } from 'rasengan';
import { rasengan } from 'rasengan/plugin';

export default defineConfig({
  runtime: 'bun', // 'node' (default) | 'bun' | 'workerd'
  vite: {
    plugins: [rasengan()],
  },
});

With 'bun', the production server runs on Bun with the same middleware stack it uses on Node. With 'workerd' and the Cloudflare adapter, the whole app is bundled into a single Worker. The Vercel and Netlify adapters were rebuilt on the new core too.

Under the hood, 2.0 also moves to Vite 8 and React Router 8.

What the beta caught

A public beta was the right call. A few of the bugs real projects found before stable:

Client-side navigations in production got a full HTML document instead of the route's loader data.
The built-in 404 page answered with HTTP 200.
In dev, module-level state (a cache, a database client) was lost between requests.
The worst one: in some apps, production SSR rendered an empty page shell. A second copy of React Router was getting bundled into the app's server code, with its own route context that never received any data. Nothing errored, the page was just empty until JavaScript loaded.

All fixed in 2.0.

Upgrading

From the beta, the one change to know about: react-router is now a peer dependency, so your app lists it directly:

npm install rasengan@latest react-router@^8.3.0

From v1, most apps only need a dependency bump and a rebuild. If you customized the server, rasengan/server no longer exports Express, and createRequestHandler now returns a standard (ctx) => Promise<Response> handler. The upgrade guide walks through it.

Try it

npx create-rasengan@latest

Docs: https://www.rasengan.dev
GitHub: https://github.com/rasengan-dev/rasenganjs
Full announcement: https://www.rasengan.dev/blog/rasengan-2-stable

Thanks to everyone who tested the beta, filed issues and sent feedback. If you build something with it, I'd love to hear about it in the comments.

Introducing Hiraiship: deploy your apps to the edge in one command

Dilane3 — Mon, 19 Oct 2026 14:21:33 +0000

Building an application is one thing. Getting it into production is another.

We spend hours on the code, then lose an evening on build configs, DNS records, environment variables and SSL. I think shipping should feel as good as building. So I've been working on Hiraiship, a deployment and hosting platform that takes your app from your machine to the edge.

Today I'm sharing it for the first time.

What it looks like

From your project directory:

npx hiraiship login
npx hiraiship deploy

login opens your browser to approve the device. There's no password, just a code sent by email. deploy packs your project, skipping node_modules, .git, .env* and anything in your .gitignore. Then it builds the project on Hiraiship's machines and streams the build logs to your terminal. When it finishes, your app is live on its own subdomain.

You can also connect a GitHub repository instead. Every push to a tracked branch deploys that branch's environment.

Frameworks

Hiraiship detects the framework and builds it with no config:

Frontend: Vite, Astro, React Router, TanStack Start, Rasengan.js, and Next.js (static export, through vinext)
Backend: Hono and Futon, bundled into a single edge Worker

Under the hood

Every app runs on Cloudflare's network, using Workers for Platforms. There's no single region to pick and no container to warm up: requests are served close to your users.

Each build runs in its own isolated container. Build outputs are content-addressed, so a redeploy only uploads the files that changed. A rollback points the routing back at a previous build, without rebuilding anything.

What you get

Environments per project (production, staging, one per branch…)
Custom domains with automatic SSL, plus redirects between domains
Environment variables, with secrets encrypted per environment and build-time vs runtime targets
Live build logs and one-click rollback
Teams with roles, and API keys for CI
A public REST API (docs.hiraiship.com)

Billing you can predict

Surprise invoices after a traffic spike are one of the most common complaints about hosting platforms. On Hiraiship:

The Free plan never bills you. Every quota is a hard limit.
Paid plans accept a spending cap, including a cap of zero, which turns every included amount into a hard limit.
Projects are unlimited. You pay for the environments that are actually live, and idle ones can be paused.

What it doesn't do (yet)

I'd rather say it up front: server-side rendering isn't supported yet. A Next.js, Astro or React Router app that needs a server at request time is refused at build time. It isn't silently deployed half-working. Static sites, SPAs and Hono/Futon APIs are what work today. SSR is next.

Try it and tell me what breaks

🌐 hiraiship.com · 📚 docs.hiraiship.com

This is just the beginning, and early feedback shapes what I build next. So:

What matters most to you when choosing where to deploy your apps? Price, speed, framework support, something else? Tell me in the comments.

Rasengan v1.2.2 - Error overlay, LLM support & agent skills

Dilane3 — Wed, 03 Jun 2026 09:09:36 +0000

Rasengan v1.2.2 is now available on npm.

We are excited to announce the release of Rasengan.js v1.2.2 🎉

This version focuses on developer experience and AI-assisted development, introducing:

Error Overlay System
LLM Support Files
Agent Skills for AI-Powered Development

🌀 Introducing Rasengan UI Kit — 100+ React Components powered by Shadcn UI

Dilane3 — Thu, 13 Nov 2025 06:00:00 +0000

Hey everyone 👋

I'm excited to introduce the Rasengan UI Kit, a growing collection of 100+ beautifully crafted React components — all powered by the amazing Shadcn UI
library.

Whether you’re building a marketing website or a full-scale application, this kit gives you everything you need to move fast while keeping a clean, modern design.

⚡ What’s inside?

🧭 Marketing Components

Perfect for your landing pages and startup websites:

Hero sections
Teams
Pricing tables
Contact sections
Testimonials
Call-to-action blocks
And much more...

🧩 Application UI

Crafted for dashboards and internal tools:

Cards
Calendars
Toolbars
Data grids
Lists
Modals and dialogs
And much more...

Each component is well crafted meeting — simplicity, flexibility, and performance.

🚀 Why Rasengan UI Kit?

✅ Built with React + TailwindCSS
🎨 Based on Shadcn UI, giving you theme consistency and customizability
🧠 Designed to work seamlessly with Rasengan.js, but fully compatible with any React project
⚙️ Easy to customize — every component is composable and theme-friendly

🌐 Take a Tour

Explore all components live at:
👉 https://ui-kit.rasengan.dev

🚀 Rasengan v1 Stable is out! 🌀

Dilane3 — Sun, 27 Apr 2025 14:12:22 +0000

I'm excited to announce you the release of the v1 stable version of Rasengan.js the modern and performant React Framework whose I'm the author 🔥

What's new in v1:
✨ SSR & CSR modes
⚡ Updated to React 19, Vite 6 and React Router 7
🎨 TailwindCSS v4 support
📄 Full MDX integration
And more...

Dive into all the details 👉 Rasengan v1 - Blog Post

That's why wre are NINJA 🥷

🚀 Introducing the Rasengan.js CLI – Create Your React Project in Seconds!

Dilane3 — Tue, 04 Mar 2025 15:30:38 +0000

Hey everyone! 👋

I'm excited to introduce the new Rasengan.js CLI, making it easier than ever to bootstrap a new React project with Rasengan.js! 🌀

🎯 What is Rasengan.js?

Rasengan.js is a React framework designed for performance, flexibility, and developer experience. It simplifies modern web development while giving you full control over your stack.

⚡ Getting Started with the CLI

You can create a new Rasengan.js project in just one command:

npx create-rasengan@1.2.0-beta.3

🛠️ Setup Steps

Once you run the command, the CLI will guide you through these steps:

1️⃣ Name your project

2️⃣ Choose your language: TypeScript or JavaScript

3️⃣ Select a template: Blank or Tailwind

4️⃣ (If you choose Tailwind) Pick a version: Tailwind v3 or Tailwind v4

After setup, just run:

cd my-project  
pnpm i
pnpm run dev

And boom! 🎉 Your Rasengan.js app is live!

🌟 Why Use the Rasengan.js CLI?

The new CLI is designed for simplicity and speed. It removes all the boilerplate and lets you focus on building. Compared to manually setting up a project, this approach is:

⚡ Faster – No time wasted on config

💡 Beginner-friendly – Just follow the prompts

🔧 Customizable – Extend it as you need

🚀 What’s Next?

Rasengan.js is currently in BETA, but a stable version is coming soon! We're improving the framework, adding features, and refining the CLI.

💻 Check it out & contribute:

🔗 GitHub: github.com/rasengan-dev/rasenganjs

📖 Docs: rasengan.dev

🎥 Demo video: youtu.be/EU2rPwUiAxU

If you try it out, let me know your feedback! 🚀

MagPies - An Image sharing app built using Rasengan.js and Netlify CDN Image.

Dilane3 — Sun, 12 May 2024 20:54:29 +0000

This is a submission for the Netlify Dynamic Site Challenge: Visual Feast.

What I Built

I develop a web application similar to Pinterest or Pexels that I decided to called MagPies. In this application everyone can explore or browse images, download them in different format (PNG, JPG, WEBP, AVIF), and only the authenticated user can share their photos into the platform. 😍

Based on the challenge requirements, I used the Netlify CDN Image in order to apply some operations on images like:

Resizing the image (width and height)
Changing the quality
Changing the image fit value (cover, fill and contain)
Downloading into different format of image.

All these features are nicely implemented using Rasengan.js my own REACT FRAMEWORK 😁😁 and Tailwind CSS for styling.

Demo

Link of the app: magpies.dilane3.com

Demo video: Video

Some screenshots:

Home

Gallery

Create photo

Profile

Image Preview and transformation

Platform Primitives

To use the Image CDN, I decided to create another simple app using just and html file and hosted it on netlify. As all the websites hosted on netlify benefit from the /.netlify/images edge function to apply all the available transformation on images, I decided to use the website as an API.

Here is the code snippet that I write to integrate the Image CDN into my application.

I started working on the Netlify Blobs in order to save for example:

Recent search query of users
Photo saved by the user

But I didn't have time to finish it, that because I was dealing during the 4 first days into the integration of my React framework and Netlify in order to host any web application built with Rasengan.js to Netlify... And after 4 days, I find a way by creating a serverless function that respond to any incoming request, this because Rasengan.js is based on a SSR logic.

I'm so glad to having participated to this challenge, it was very nice. I got an opportunity to enhance my React Framework to support Netlify, I learn about how to integrate Netlify Image CDN into apps... sooo good. Thanks a lot.

I hope, what I did will impress you.

Rasengan.js 1.0.0 Beta 🚀

Dilane3 — Sun, 28 Apr 2024 13:33:39 +0000

Hello Developers 👋 My name is Dilane Kombou, I'm a JavaScript developer from Cameroon.

I'm very excited to announce you that I released the first version of my own React Framework that I called Rasengan.js 🚀

Based on React and Vite, it provides to you a great experience for developing high-quality web application.

It supports a major list of modern features of the web that you can have access of the Blog post, published on the official website of Rasengan.js.

The project if open source, so you can check the code and even contribute to it without problem 😊

Resources

Community

Follow Rasengan.js on Twitter
Github: Join the Github Discussions

Please check it out, leave me stars on Github and provide me feedback on the Github discussions to better enhance the framework.

Thanks.

Animated Sidebar made using Rasengan and Tailwind

Dilane3 — Sat, 20 Jan 2024 15:02:04 +0000

What I did

I did an animated Sidebar using my own REACT FRAMEWORK (on which I'm working actually) and Tailwind.

Demo

Links

GitHub - https://github.com/dilane3/animated-sidebar-rasengan.git
Live Demo - https://animated-sidebar-sigma.vercel.app/

I created a shapes drawing app using React called ShapX.

Dilane3 — Sun, 19 Nov 2023 04:32:47 +0000

Hello everyone 👋🏼, I'm coming here to present to you an application that I created using React that I called ShapX which aims to provide you the possibility to draw shapes like in drawing apps.

What's ShapX ?

well, ShapX is a shapes drawing app that you can use to create forms like: squares, rectangles, circles, ellipses, diamonds and hexagons...

After having drew a shape, it directly calculates some geometric properties like perimeter and area of your shape.

What are the core features ?

You will have the possibility to test it in real live (only on your computer), but globally, ShapX comes with the following features:

Creating new drawing file
Renaming the file
Adding shapes for any available types
Changing parameters of the shapes (position, width, height, radius)
Changing color of the shape
Removing and duplicating shapes
Export the file into PNG, JPG and a custom file with .shapx extension
Load a SHAPX file

These are the fundamentals 🔥

I did the whole app in just 5 days 😅😅

Let's see it in images

Welcome screen

Empty drawing screen

Adding one shape

Changing color of the shape

For managing state, I decided to use GX, a lightweight and powerful tool that helps a lot in state management.

It's my own tool that I created 😁😁, and I use it in all my React, Nextjs and React Native applications.

Check the documentation of GX: https://gx.dilane3.com

The app is available to public, and you have the possibility to test and leave comments right here, I will really appreciated it.

Link of the app: https://shapx.dilane3.com

You also have to possibility to access the code on GITHUB, please leaves stars ⭐, it helps a lot.

GITHUB: https://github.com/dilane3/shapx-client

Thanks for reading

Thanks for having read my post 😉

I published my First App on Google PlayStore 😍😍✨

Dilane3 — Mon, 31 Jul 2023 13:43:34 +0000

What I built?

Hello Devs 😁😁✨

This is an excited day 😊

I'm excited to shared with you what makes me happy today.

I published my First Mobile App on Google Play store 😍

I decided to call it Dask, and it's a mobile application that will help you manage your tasks and organized them into projects for easy manipulation ☺️.

How it works really?

There is two mode, the first one is that you can use this app for a personal use case. For example you want to realize a simple application with some features, you can create a personal project in the app and add features you want to implement as tasks 😁😁 simple.

The second one is that, if for example you have to work with some one else and assign tasks to a specific team member, you have to create a shared project instead 😁, and inside you could be able to invite people to collaborate 🙂✨

Screenshots

Which tools I used ?

Let me show you what I used to develop it.

React Native (mobile app)
Firebase (Backend, especially used to store shared projects that you will ahve with your team)
Nodejs (Express & Socket.io) for real time
Gx for state management (it's my own State Management Library 😁) check the documentation here: https://gx.dilane3.com

That's all

If you want to test 😁

Just follow the link below, and please leave feedbacks 🙏🙏 I will really appreciate it.

The link of the application is down here.

https://play.google.com/store/apps/details?id=com.dilane3.dask

Thanks for reading 😌

Robust Form - A simple and easy to use Form Builder application like Google Form.

Dilane3 — Thu, 20 Jul 2023 19:33:51 +0000

What I built

I decided to build a form builder web application by using Refine as asked and combined to NextJs and Material UI to realize the Frontend app and Supabase for the the Backend side and I decided to call it Robust Form

Category Submission:

App built using Refine + Supabase and MUI.

App Link

https://rf.dilane3.com

Screenshots

Large screen:

Mobile View:

Description

Robust Form is actually a form builder as said above. So, the application will be used to generate forms easily and share it to everyone in order to collect data for scientific researches for example, or other use cases.

Link to Source Code

https://github.com/dilane3/robustform

Permissive License

MIT Licence

Background (What made you decide to build this particular app? What inspired you?)

I was very impressed by how Google Form works, and I didn't really know how to start building this kind of application. That's why I took this possibility to create my own form builder and share the source code in an open source Licence to help others developers to know how to start, how to implement this kind of application.

How I built it (How did you utilize refine? Did you learn something new along the way? Pick up a new skill?)

Oh yes, I learnt alot of new things.

I want to mentionne that, I didn't know what Refine and Supabase were before this Hackaton, so thank you so much for this opportunity. I read the documentation of refine, of Supabase because it was new for me. It was a great experience.

Additional Resources/Info

Demo of the application Here

Example of form generated Here

DEV Community: Dilane3

Rasengan.js 2.0 is stable

A core built on web standards

API routes next to your pages

Node.js, Bun or the edge

What the beta caught

Upgrading

Try it

Introducing Hiraiship: deploy your apps to the edge in one command

What it looks like

Frameworks

Under the hood

What you get

Billing you can predict

What it doesn't do (yet)

Try it and tell me what breaks

Rasengan v1.2.2 - Error overlay, LLM support & agent skills

🌀 Introducing Rasengan UI Kit — 100+ React Components powered by Shadcn UI

⚡ What’s inside?

🚀 Why Rasengan UI Kit?

🌐 Take a Tour

🚀 Rasengan v1 Stable is out! 🌀

🚀 Introducing the Rasengan.js CLI – Create Your React Project in Seconds!

🎯 What is Rasengan.js?

⚡ Getting Started with the CLI

🛠️ Setup Steps

🌟 Why Use the Rasengan.js CLI?

🚀 What’s Next?

MagPies - An Image sharing app built using Rasengan.js and Netlify CDN Image.

What I Built

Demo

Platform Primitives

Rasengan.js 1.0.0 Beta 🚀

Resources

Community

Animated Sidebar made using Rasengan and Tailwind

What I did

Demo

Links

I created a shapes drawing app using React called ShapX.

What's ShapX ?

What are the core features ?

Let's see it in images

More

Thanks for reading

I published my First App on Google PlayStore 😍😍✨

What I built?

How it works really?

Screenshots

Which tools I used ?

Robust Form - A simple and easy to use Form Builder application like Google Form.

What I built

Category Submission:

App Link

Screenshots

Large screen:

Mobile View:

Description

Link to Source Code

Permissive License

Background (What made you decide to build this particular app? What inspired you?)

How I built it (How did you utilize refine? Did you learn something new along the way? Pick up a new skill?)

Additional Resources/Info