DEV Community: Shayan

MotionKit just got better! The goto animation tool in 2026

Shayan — Fri, 20 Feb 2026 12:33:24 +0000

MotionKit is great, not just because of its great features,
Also because it's generously 100% free, allows you to render & export any animation to Mp4/Gif/Png & even lottie. No hidden paywalls! This makes the whole motion design process FREE and even brings non-figma users into Figma, because Figma is also mostly Free and you can even create social media or product videos using MotionKit without spending a penny!

Previously it already had great features:

Timeline with strong record, allowing to animiate and interpolate everything inside figma.
Frame By Frame animation with Onion Skinning
Nested Animations via nested artboards
Free forever

But now it just updated to the new version, version 2+ and it got even better. The new stuff added:

Modifiers

Now it's truly a mini blender inside Figma, using modifiers you can now:

Stroke Path tracing, animate any element on another vector path
Type writer Effect for texts!
Loop modifier for any Layer
Copy Animations from other layers and ...

Modifiers open so many opportunities and architecture, allows to headlessly build and plug-in more modifiers in future.

Timeline Markers

Now by default if you hit "M" in the timeline ( You can customize the shortcut from settings, just like any other shortcut key ), it places a Marker on that time, and you can label them or give them any color as you wish.

Bug fixes, UX Improvements

Transform system refactored so properties like Morphing, Rotation, transform and ... perform together much better.
Layer List now supports drag drop sorting, and reparenting.
Animation Can happen now for any fill property ( Solid Colors, Gradients, Pattern, and Image properties like contras, brightness and ... )

Download the plugin

Download from Figma Community || Download From Github

if you found MotionKit helpful, you can always donate & sponsor the dev team to keep this tool alive & free for everyone.

Let me know in the comments how you think :)

Animation & Motion Design INSIDE FIGMA 2026

Shayan — Sun, 15 Feb 2026 07:11:04 +0000

I always enjoyed designing inside Figma, But when it comes to animation, then we have to either go with After Effects or Davinci Resolve which they're not as comfortable as Figma.

That's why I started making one of my most ambitious projects, MotionKit.

MotionKit Super Powers

You can turn ANY Figma frame ( artboard ) into:

1. Timeline Animation

Powerful Record Mode ( Morphing, Text Animation, Colors, Everything! )
Blender Inspired Timeline
Presets Manager ( Default presets + Define your own custom presets )
Modifiers ( GAME CHANGER ) - can be anything! like stroke path tracing or Type writer effect or maybe even particle effects!

2. Frame By Frame Animation

Onion Skinning ( Customizable )
Compatible with Figma Draw mode
NEW: Mirror selection to select that layer from all FBF frames

Nested Animations!

have multiple nested frames with different animations
They can have different frame rates, and duration and looping mode

Render without paywalls!

Render as Mp4 - Gif - PNG Sequence
Export as Lottie animation

This plugin is TOTALLY Free. I didn't wanna make it a SaaS and lock some features, I wanted to help more designers.

But if you end up using it and found it helpful, You can always support me:
BuyMeACoffee
Sponsor in Github

Links to this project:
Figma Community page (INSTALL HERE)
MotionKit Official Website
Github

I built a FREE animation plugin for Figma: MotionKit

Shayan — Sat, 14 Feb 2026 16:58:13 +0000

So here's the thing — I've been building stuff in Figma for years, and the one thing that always bugged me was animation. You'd design something beautiful, then have to export frames, jump into After Effects or some other tool, and basically rebuild everything from scratch.

It felt... broken? Like we had all this power for design but then hit a wall when we wanted things to move.

What is MotionKit?

MotionKit is a completely free Figma plugin that brings real animation tools directly into Figma. Not prototypes. Not fake transitions. Actual keyframe animation, frame-by-frame workflows, morphing, text animation, and direct MP4/GIF export.

No subscriptions, no premium tiers, no "upgrade to unlock" nonsense. Just free.

Try it on Figma Community →

The stuff that actually matters

Timeline Mode – Record Everything

You know how in After Effects you can just move stuff and keyframes appear? That's what Record mode does. Enable it, scrub the playhead, modify your layers in Figma, and boom — keyframes appear automatically. No clicking through menus, no manual keyframe placement for every single property.

It records position, scale, rotation, opacity, blur, shadows, corner radius, fills, strokes... basically everything.

Frame-by-Frame Mode – Classic Animation

For those who like drawing things frame by frame (or just prefer that level of control), there's a full cel animation workflow with onion skinning. You can scrub through frames, reference previous frames as translucent overlays, and time each frame individually.

Nested Frames (this one's wild)

Here's where it gets interesting — you can nest animations inside each other. Timeline inside frame-by-frame. Frame-by-frame inside timeline. Each with its own FPS. They all render correctly.

This unlocks so many possibilities for complex animations that I'm still discovering new ways to use it myself.

Morphing & Text Animation

Real SVG path morphing between different shapes. And text animation isn't just "fade in" — you can animate per-character, per-segment, with control over font size, color, spacing, line height, all independently keyframed.

Export to MP4, GIF, PNG

No external tools. Render directly to MP4 (H.264), GIF, or PNG sequence at 1x–4x scale. Just hit render and you're done.

Blender-Inspired Shortcuts

All keyboard shortcuts are customizable. Default shortcuts feel a bit like Blender — select keyframes and hit G to grab/move them or S to scale. If you've used Blender, you'll feel right at home.

Why free? (aka the awkward money talk)

Look, I could've gone the SaaS route. Monthly subscriptions, freemium tiers, all that. But honestly? I just wanted this to exist. I wanted designers to have proper animation tools without hitting paywalls or dealing with export workflows that waste hours.

That said... this takes a lot of time to build and maintain. So if you use it and it saves you time (or you just think it's neat), any support helps:

GitHub Sponsors – ongoing support
Buy Me a Coffee – one-time thing

Can't donate? That's totally fine. Just tell someone about it. Tweet, post, share, whatever. The more people know about it, the more likely it keeps existing.

What's next?

The plan is to eventually open-source this once it's mature enough. Right now it's free to use, but I want to clean up the code, add better docs, and make sure it's solid before opening it up fully.

Also working on more features, fixing bugs, and generally making it better based on feedback.

Try it yourself

Website: motionkit.codeideal.com
Figma Plugin: Install here
GitHub: novincode/motionkit
Docs: motionkit.codeideal.com/docs

If you build something cool with it, I'd love to see it. Or if you find bugs (and there probably are some), open an issue or just email me at ideyenovin@gmail.com.

Thanks for reading ✌️

DLMan :: the download manager I always wanted

Shayan — Thu, 08 Jan 2026 12:30:57 +0000

As a Mac user, I always felt this gap.
Windows users have IDM and a bunch of other solid download managers, but most of them are ancient, paid, or both. Meanwhile on Mac? Not much to choose from.

So I did what any frustrated developer would do; I built my own.

Introducing DLMan

DLMan is a modern, open source download manager, built with Rust (Tauri) and React.
It’s fast, lightweight, and actually works the same on:

Windows
macOS
Linux

Why is it great?

Multi-segment downloads with stable pause / resume
Queues, schedules, and post actions (yes, including shut down my computer when finished)
Batch import + drag & drop (single or multiple links)
Super lightweight (~5MB)
Modern architecture, fully cross-platform
Browser extensions
100% open source

Download

You can grab it from GitHub:

👉 GitHub Repo
👉 Latest Release

Final words from the creator

I genuinely love what I’m doing.
I love building open source tools and sharing them with the world.

But yeah — making a living this way isn’t easy.
Open source survives because of the community behind it ❤️

How you can support DLMan

Use it and report issues (right here)
Share it with friends
Star the repo ⭐
Feeling generous? ☕ Buy me a coffee || sponsor the project

I really want to put more time into DLMan and make it even better.
I do read issues, and I do try to fix them.

Thanks for being part of this...

I Built DLMan, the Modern Download Manager I always needed!

Shayan — Tue, 06 Jan 2026 14:36:42 +0000

The Problem

For years, I've been jealous of Windows users having IDM (Internet Download Manager). As someone who switches between Mac, Linux, and occasionally Windows, I wanted something that just works everywhere. Something fast, reliable, and doesn't cost $30.

I tried the free alternatives out there. None of them really clicked with me—either too bloated, missing features, or just didn't feel right. So I did what any developer would do: spent way too many nights building my own 😅

Introducing DLMan

DLMan is the open-source download manager I always dreamed of. Built with Rust (Tauri) and React, it's fast, lightweight, and actually works across all platforms.

Why I'm Excited About It

⚡ It's Actually Fast

Multi-segment downloads (split files into 1-32 parts)
Downloads happen in parallel segments, maxing out your bandwidth
Real-time monitoring so you can see exactly what's happening
Lightweight: ~6MB on Mac, ~4MB on Windows (no Electron!)

🔄 It Won't Let You Down

Here's the thing—I hate when downloads fail halfway through a 5GB file. DLMan uses SQLite to persist everything, so even if your computer crashes, your downloads are safe. Just resume when you're back.

Pause and resume anytime
Auto-resume after crashes or restarts
Automatic retries for failed segments
No corrupted half-downloaded files

🗂️ Smart Organization

Queue management with priorities
Schedule downloads for later (great for overnight downloads)
Batch import multiple URLs at once
Categories with custom folders
Post-download actions: shutdown, sleep, or run custom commands

🎨 Clean Interface

I wanted something that doesn't look like it's from 2005. Modern UI with dark/light themes, drag-and-drop support, and real-time visualization of download segments.

Browser Extensions

Because manually copying URLs is annoying:

Chrome, Edge, Brave
Firefox

Just install the extension and downloads get captured automatically.

There's a CLI Too!

For the terminal lovers (like me), there's a full-featured CLI:

# Quick download
dlman add https://example.com/bigfile.zip

# Custom segments and output folder
dlman add https://example.com/file.zip -o ~/Downloads -s 8

# List all downloads
dlman list

# Pause/resume/cancel
dlman pause <id>
dlman resume <id>

The CLI shares the same core engine as the desktop app, so you get feature parity. Perfect for automation and scripts.

The Tech Stack

I chose Rust + Tauri for a reason:

Rust backend: Native performance, memory safety, no crashes
Tauri v2: Way lighter than Electron (seriously, check the file sizes)
SQLite: Crash-safe persistence
React + TypeScript: Modern, reactive UI
Tokio + Reqwest: Async downloads done right

Cross-Platform Done Right

Platform	Downloads
Windows	`.msi`, `.exe`
macOS (Intel)	`.dmg` (x64)
macOS (Apple Silicon)	`.dmg` (aarch64)
Linux	`.deb`, `.rpm`, `.AppImage`

Download from: GitHub Releases

It's Free. Forever.

DLMan is MIT licensed and 100% open source. No premium tiers, no locked features, no tracking. Just a solid download manager that respects your privacy and freedom.

But here's the thing—open source projects only survive with community support. If you find DLMan useful:

⭐ Star the repo on GitHub
🐛 Report bugs or suggest features
🤝 Contribute code, docs, or translations
☕ Buy me a coffee if you're feeling generous
💬 Spread the word!

Every bit helps keep this project alive and improving.

Try It Out

GitHub: github.com/novincode/dlman

Installation docs, CLI guide, and architecture details are all in the repo.

I’d love to hear your thoughts. Feel free to drop a comment or feedback.

I Fixed Blender's Render Output Paths ( Because it SUCKS! )

Shayan — Mon, 15 Dec 2025 05:37:42 +0000

The Problem

Blender's render output? Just a text field. No variables, no organization, no help.

You end up with untitled.png, untitled0001.png, final_final_ACTUAL.png. I searched for a solution. Found nothing. AI suggested some janky script. I wasn't having it.

So I built RenderNames.

How It Works

Write a template once:

{{blend_file}}/{{date}}/{{scene}}_{{camera}}_

It becomes:

my_project/2025-01-15/Scene_Camera_0001.png

Blender adds frame numbers. You handle the smart naming. Done.

What You Get

✅ Live preview — See your output path as you type

✅ Template variables — {{scene}}, {{camera}}, {{date}}, {{time}}, {{resolution}}, {{engine}}, and more

✅ Auto-folders — Organize by date, scene, camera

✅ Presets — Save and share with your team

✅ Native Blender — Lives in Output Properties, no weird UI

Install (Literally 2 Minutes)

Download .zip from Releases
Blender: Edit → Preferences → Extensions → Install from Disk
Enable it, go to Output Properties, start templating

Support RenderNames

If this saves you time, here's how you can help:

⭐ Star on GitHub — github.com/novincode/rendernames

💙 Sponsor — github.com/sponsors/novincode

🐛 Report bugs — Issues

Blender 4.2+ | Open source (GPL-3.0)

I Built OpenFields ( Free Alternative to ACF for WP )

Shayan — Thu, 11 Dec 2025 19:16:43 +0000

You know that moment when you're building a WordPress site and think, "I really don't want to pay for ACF Pro"? Yeah, me too.

So I built OpenFields.

It's a modern, completely free custom fields plugin for WordPress that does everything ACF does – without the price tag or vendor lock-in. And honestly? It's been way more fun building this than I expected.

The Problem I Was Solving

Custom fields are essential for WordPress development. But if you want repeaters, conditional logic, or anything beyond the basics, you're looking at ACF's pricing model. Nothing wrong with ACF – it's solid. But I wanted something that:

✅ Is 100% free (no premium tiers hiding behind paywalls)
✅ Is open source (you own your tool, not the other way around)
✅ Uses an API that feels familiar if you've used ACF
✅ Actually feels modern to build with

So yeah, I decided to build it myself.

The Visual Builder

Drag and drop fieldsets together. No code needed. Add fields, organize them, set rules – all in a beautiful React interface. It's the kind of UX that makes you actually want to use it.

All the Field Types

Text, textarea, select, radio, checkbox, switch, repeater, groups, relationships... I could list them all but you get it. The important ones are all there.

Conditional Logic That Actually Works

Show or hide fields based on other field values. Set it up in the UI, it just works. No "I configured this but it's acting weird" nonsense.

Location Rules

Display your fieldsets exactly where you need them:

On specific post types
For certain user roles
On taxonomies
Custom conditions

The API (Yes, It's Familiar)

If you've used ACF, you already know how to use OpenFields. Same functions, same logic:

// Get a field value
$price = get_field('price');

// Loop through repeater rows
if (have_rows('team_members')) {
    while (have_rows('team_members')) {
        the_row();
        echo get_sub_field('name');
    }
}

No learning curve. Just works.

Getting Started (Right Now)

Download from GitHub Releases
Upload to WordPress (Plugins → Add New → Upload)
Activate and go to Tools → OpenFields
Build your first fieldset

Seriously, you'll be up and running in 5 minutes.

Join In

This is an open source project. If you:

Find bugs → Report them
Have ideas → Discuss them
Want to contribute → Pull requests welcome

The WordPress community is better when we build things together.

Quick Links

GitHub: novincode/openfields
Documentation: openfields.codeideal.com/docs
Download: Install from Wordpress

That's it. OpenFields is free, open source, and ready to use. No credit card required, no lock-in, no nonsense.

Give it a shot. I think you'll like it.

For those who want to support this mission: ⭐ Star on Github ⭐ | ☕ Buy Me a Coffee ☕

Install From Wordpress

Download OpenFields · View on GitHub

I made Lexkit ( Rich Text Editor I wish existed !)

Shayan — Sun, 02 Nov 2025 17:29:11 +0000

Hi fokls,
I'm here to share a story, my story on rich text editors and finally making my own.
I’ve always had trouble using rich text editors.
they were all either too basic, or too heavy, or too complex, or too expensive.
I used tiptap in a few projects, it had great options, but it was still a bit heavy, and I didn’t like its core (ProseMirror).

Then I heard that Meta had built a new RTE called Lexical.
This was MUCH BETTER than Tiptap.
But the DX and learning curve of Lexical were tough.
You have to deal with low-level code ; and I wanted something that felt more like React and TypeScript, not JS from 2010! 😅

So I decided to build my own Layer on top of Lexical,
and tried to keep everything headless,and scalable.

I won’t talk too much here (I won’t blow your head with BS 😅).
I've documented everything here: Lexkit Docs

The Live Demo is here: Lexkit Demo
and we have a Shadcn Based Demo too. with its docs

To support this project, STAR this repo here

Thanks for your time, Let me know what you think and what to improve ;)

I Created CFMan, Cloudflare Wrangler Multi Account Manager

Shayan — Sun, 12 Oct 2025 04:36:05 +0000

Hey folks 👋
So… I built a little thing called CFMan — short for Cloudflare Manager.

If you’ve ever juggled multiple Cloudflare accounts, workers, or pages, you know the pain.
Switching tokens manually, exporting env vars, praying Wrangler doesn’t mix accounts… 😩
Yeah, been there.

That’s why I made CFMan — a beautiful, colorful, emoji-filled CLI that makes it dead simple to manage multiple Cloudflare accounts and deploy Workers or Pages from one place.

🪄 What It Does

CFMan basically wraps around Wrangler, but smarter.

🔐 Manages multiple API tokens — securely stored, encrypted, per-account
🚀 Deploys Workers/Pages with a single clean command
⚡ Runs any Wrangler command but with --account flag
🧠 Automatically uses npx wrangler if Wrangler isn’t installed globally
🎨 Pretty CLI output (because yes, even your terminal deserves good design)

🖼️ Here’s What It Looks Like

That’s literally npx cfman --help.
It gives you colors, emojis, examples, and everything you actually need to remember how your tool works. 😅

🚀 Quick Start

# install globally (recommended)
npm install -g cfman

# or just try it
npx cfman --help

Now add your first account:

cfman token add --name production --token cf_xxx

Check what’s going on:

cfman status

And deploy anything:

cfman wrangler --account production pages deploy out

That’s it.
No more exporting tokens or switching profiles like a maniac.

💡 Before CFMan vs After CFMan

Before:

export CLOUDFLARE_API_TOKEN=cf_token_for_client_a
wrangler deploy --env production

export CLOUDFLARE_API_TOKEN=cf_token_for_client_b
wrangler pages deploy out

After:

cfman wrangler --account client-a deploy --env production
cfman wrangler --account client-b pages deploy out

That’s the whole magic.
You keep your sanity, your tokens are isolated, and your deployments stay clean.

🧰 Under the Hood

Built entirely in TypeScript, bundled with tsup, and designed to be fast, tiny, and safe.
CFMan stores your tokens locally under:

macOS/Linux → ~/.config/cfman/tokens.json
Windows → %APPDATA%/cfman/tokens.json

All with file permissions set to 600 (so only you can read/write them).

And starting v0.4.0 → CFMan supports Package Provenance, meaning you can cryptographically verify the npm package comes straight from GitHub source.
No shady npm nonsense. 🛡️

📦 Wrangler Integration

You can literally run any Wrangler command:

cfman wrangler --account prod d1 list
cfman wrangler --account staging pages project list
cfman wrangler --account demo kv namespace create test

Even if Wrangler isn’t installed globally.
CFMan falls back to npx wrangler automatically.

⚙️ Setup Wizard

If you’re new, just run:

cfman setup

It walks you through everything interactively — adding tokens, naming accounts, verifying access, etc.
Like a friendly little terminal assistant.

🧠 Why I Built It

Honestly, I got tired of exporting tokens, messing up deployments, and switching environments like some kind of Cloudflare juggler.
There had to be a clean, developer-friendly way to handle all accounts — and make it look nice while doing it.

So here we are.
CFMan. It’s open-source, MIT licensed, and you can grab it here:
👉 github.com/novincode/cfman

💬 Final Thoughts

If you work with Cloudflare Workers or Pages and have multiple accounts (clients, staging, production, whatever), this tool will literally save your life.

Give it a try:

npx cfman --help

And if you like it, drop a ⭐ on the repo — it helps a ton 💜
Let’s make Cloudflare dev experience a little more magical ✨

Why I chose Lexical over Tiptap

Shayan — Wed, 24 Sep 2025 16:28:36 +0000

So… confession. I was a tiptap fan boy. Like really. install → write 2 lines → editor works. nice. done. 👏

Then I saw Lexical… and omg its fast as hell. Also its made by Meta (yeah fb guys), same people who made React. And I was like, okay okay let’s try this baby.

Tiptap vs Lexical

Feature	Tiptap	Lexical
Bundle Size	~110kb+ (depends what you add)	~25kb core only
DX (developer experince lol)	super easy, ready 2 go	low level, you build more urself
Performance	decent, but bigger	ultra fast & light
Community	huge, lot of examples	growing, meta support
Out-of-the-box	✅ many features plug n play	❌ nope, u add stuff ( Unless you use Lexkit )

My experince

Tiptap = feels like plug socket, u just connect ur charger.
Lexical = feels like buying wires & making ur own charger 😅 but once u do, its lighter & faster.

And yeah, first time I tried lexical, I was like

“bruh where is bold button?? why i must code bold my self??”

then boom 💥 I found LexKit → open source layer on top of Lexical.
It’s like… same vibes as shadcn on radix. u get the raw power + nice developer experince. Honestly saved me.

Final thoughts

Tiptap = 🍕 ready pizza, eat now.
Lexical = 🥦 raw veggies, u cook but more healthy.

And with LexKit → feels like u got a chef who preps the veggies for u 😂

So yeah, that’s why I kinda moved. Not saying tiptap bad… I still love it. But lexical is lighter, and I like fast things.

What u think? You on team tiptap or lexical? Or still lost in contenteditable hell lol
Thanks for the time, feel free to comment down below :)

Building a Type-Safe Rich Text Editor in Next.js (with Lexical & Lexkit)

Shayan — Wed, 24 Sep 2025 03:31:17 +0000

So… I’ve always hated building editors. Either they’re too basic or just way too complex.

Then I was like: why not build my own? And that’s how LexKit happened ⚡️

It’s a React-first, type-safe, DX-friendly editor system built on top of Lexical.

Perfect for Next.js apps if you want something lightweight but not boring.

Getting Started (Basic Example)

Here’s literally the simplest editor you can make with LexKit:

"use client";

import {
  createEditorSystem,
  boldExtension,
  italicExtension,
  listExtension,
  linkExtension,
  historyExtension,
  RichText,
} from "@lexkit/editor";
import "./basic-editor.css";

// 1. Define your extensions (for features like bold, lists, etc)
const extensions = [
  boldExtension,
  italicExtension,
  listExtension,
  linkExtension,
  historyExtension,
] as const;

// 2. Create typed editor system
const { Provider, useEditor } = createEditorSystem<typeof extensions>();

That’s the “engine.”
Now let’s add a toolbar so you can actually click stuff:

function Toolbar() {
  const { commands, activeStates } = useEditor();

  return (
    <div className="basic-toolbar">
      <button onClick={() => commands.toggleBold()} className={activeStates.bold ? "active" : ""}>
        Bold
      </button>
      <button onClick={() => commands.toggleItalic()} className={activeStates.italic ? "active" : ""}>
        Italic
      </button>
      <button onClick={() => commands.toggleUnorderedList()}>• List</button>
      <button onClick={() => commands.toggleOrderedList()}>1. List</button>
      <button onClick={() => commands.undo()} disabled={!activeStates.canUndo}>Undo</button>
      <button onClick={() => commands.redo()} disabled={!activeStates.canRedo}>Redo</button>
    </div>
  );
}

And the editor itself:

function Editor() {
  return (
    <div className="basic-editor">
      <Toolbar />
      <RichText
        placeholder="Start writing your content here..."
        classNames={{
          container: "basic-editor-container",
          contentEditable: "basic-content",
          placeholder: "basic-placeholder",
        }}
      />
    </div>
  );
}

export function BasicEditorExample() {
  return (
    <Provider extensions={extensions}>
      <Editor />
    </Provider>
  );
}

Boom 💥 you got a working editor in Next.js with bold, italic, lists, undo/redo.
No crazy config, no vendor lock-in.

Features that just work

Type-safe extensions → autocomplete knows what commands exist.
Next.js Ready → works out-of-the-box with use client.
Theming? yep → the DefaultTemplate plays nice with next-themes
Production-ready → images, tables, markdown, html import/export, history, you name it.

Final thoughts

Rich text editors suck less when you can actually understand the code.
LexKit is my attempt to make editors fun (and honestly DX-friendly).

If you’re already playing in the Next.js world → give it a spin.
Docs are here 👉 lexkit.dev

PS: if this helped, smash the ❤️ or drop a comment. Makes me feel less like I’m coding into the void 😂

Lexkit is open source, free and under MIT license. I love to develop it and push it forward. But like every other open source project, it's only possible with your supports. whether it's a github star⭐, a comment or even a small donation.

To support this project check Github Repo
Thanks for your time, try it out and report any issues or bugs.

ShadCN Rich Text Editor with Lexical + Lexkit

Shayan — Tue, 23 Sep 2025 00:35:22 +0000

So, in my last post I was ranting about my struggles with building rich text editors…

Every time I touched Lexical, I loved the core idea but… the DX (developer experience) felt… meh.

I wanted something where I could just plug in extensions, have full type-safety, and not fight the damn thing every two lines of code.

And guess what? I finally did it 🎉

I built LexKit — my own little framework on top of Lexical.

DX-friendly, modular, and honestly the editor system I always wished existed.

Here's a quick preview of the shadcn template that I've made.

👉 Shadcn based editor ( See the demo )

Lexkit RTE made on Lexical

Lexkit Peerdeps on Lexical,
To add this editor into your own React project:

Install lexkit

npm install @lexkit/editor

and Lexical Deps

npm install lexical @lexical/react @lexical/html @lexical/markdown @lexical/list @lexical/rich-text @lexical/selection @lexical/utils

Then, check out the docs here to plug in the Shadcn template: Shadcn Based Template Docs | Source Code on Github

That’s it. No magic. Just install, copy, paste, and boom → you’ve got a Shadcn flavored RTE.

Qucik Editor Example to see how things work

Here’s a minimal editor setup using LexKit.
Literally like 10 lines of code:

import { createEditorSystem, richTextExtension, boldExtension, italicExtension } from "@lexkit/editor"

const extensions = [
  richTextExtension,
  boldExtension,
  italicExtension,
] as const

const { Provider } = createEditorSystem<typeof extensions>()

export default function MyEditor() {
  return (
    <Provider extensions={extensions}>
      <div className="p-4 border rounded">
        {/* RichText extension renders automatically */}
      </div>
    </Provider>
  )
}

That’s all. You can start typing right away.

Why I built Lexkit?

Because DX matters to me a lot.
I was sick of guessing types, fighting plugins, and patching random examples from GitHub gists.

With LexKit:

you get typed commands & state queries out of the box
extensions are composable and headless (like lego blocks 🧱)
it’s React-first, so no weird wrappers
and yes… it actually works in production.

What’s Next?

I'm working to add more extensions, more templates and demos and more docs.

Your supports will keep this project going. It can be a comment or Github Star, or suggesting features and reporting bugs, or even a small donation or sponsorship 🙈

👉 Lexkit Docs
👉 GitHub

That’s it. Hope this helps you if you’ve been lost in RTE hell like I was.
And if you try it, let me know what breaks 😅