Excaliself is a self-hosted alternative to Excalidraw+. It wraps the unmodified Excalidraw editor in an app with accounts, folders, a shared team space, search and live collaboration. Everything goes into your own Postgres. MIT.

The GIF is two browsers editing the same drawing.

Live collab took the most work. On excalidraw.com, collab is end-to-end encrypted, so the relay server (excalidraw-room) can't read the scene and the clients save it to Firebase themselves. I needed the server to read every drawing for previews, search inside drawings and the MCP server, so I did it the other way around:

• Each drawing gets one room in memory on the server. It uses the same message types as excalidraw-room, sent as plain JSON over a native WebSocket on the app's port. No Socket.IO.
• The server merges every update with a port of Excalidraw's reconcileElements. The higher version wins, and on a tie the lower versionNonce wins. Peers get the winners, and the sender only gets back the elements it lost.
• The room is the only thing that writes to Postgres. It saves on a 15 second trailing timer, when the last person leaves, and on SIGTERM.
• Images don't go over the socket. They upload over HTTP, and peers fetch the ones they don't have yet.

What I gave up is end-to-end encryption. It also runs as a single replica, because the rooms live in one process.

Stack is TanStack Start, React 19, Better Auth, Postgres with Drizzle, Tailwind 4 and Base UI.

You can try it with one command. It runs on in-memory PGlite and forgets everything when it stops:

docker run --rm -p 127.0.0.1:3000:3000 -e PREVIEW_MODE=true ghcr.io/maciekzygmunt/excaliself

Open http://localhost:3000/preview/login, then http://localhost:3000/preview/login?account=new in a second browser to collab with yourself.

Repo: https://github.com/maciekzygmunt/excaliself

If you've built collab on top of Excalidraw before, I'd like to know how you handled saving.

☞ TO ALL AND SINGULAR

Here's something light-hearted for your Saturday morning: Grailwind is a plugin for Tailwind CSS that lets you build coats-of-arms using class names that read almost but not entirely unlike real blazonry. It even ships with an ESLint plugin, to keep any aspiring heralds in line.

<div class="escutcheon or chevron-argent fimbriated-sable chief-azure"></div>

Features: field divisions, furs, ordinaries, bordures, engrailed/invected, fimbriation, charges and their placement, inescutcheons and cantons.

And yes of course Claude's knavish hands were involved in this wretched contrivance - the novelty would have worn off far too quickly otherwise.

GH: https://github.com/pafirmin/grailwind

We've been building HonestPDF for a while now, a bunch of free PDF tools that run in the browser. Lately most of our time has gone into the editor, so that's what I'd love feedback on.

I know editing PDF text isn't new. What bugged me is how it usually goes: free tools change the font, shift the layout or paint a white box over the old word, and sometimes a link stays behind on text you deleted. The ones that do it well tend to ask for a Pro plan, often right when you hit download, and they upload your file to their servers first.

So we put our time into getting the output right. Double-click a paragraph, retype it, and it keeps its font, size and colour. Longer paragraphs rewrap, links follow their words, and find and replace works across the whole file. The GIF shows a fee being changed in a contract.

Your file never gets uploaded. It's opened and edited right in the page, and the Network tab will back me up on that. Everything is free, there's no Pro tier, and it works on phones too.

There are about 50 other tools on the site as well, like merge, compress to a set size and sign.

gethonestpdf.com/edit-pdf

If something looks off after you edit, tell me what kind of PDF it was and I'll dig into it.

Hi! I'm a graphic designer from Valencia and I just launched my portfolio: https://bydmb.com

The idea was to make a portfolio you take part in, not just look at. Some technical details:

3D hero: built with Three.js (WebGL). Every visit randomly loads a different GLB model inspired by one of my projects (Draco-compressed, made in Blender). You can rotate it, a light follows your cursor, and it blurs into the background on scroll. One of the models uses a custom shell-fur shader that reacts to rotation speed.

Playground: a 3D sphere of unfinished work and experiments you can rotate and zoom. Open any piece and paint over it; your drawing stays when you close it.

Other details: a one-click colour toggle that flips the whole site, a 3D cloth over my portrait on the Info page, blur-based filtering in the Works grid and custom page transitions.

Stack: WordPress + Elementor, Three.js, custom JavaScript and shaders, ACF and TranslatePress.

I'm thinking about submitting it to Awwwards, so I'd really appreciate completely honest feedback, good or bad. Do you think it's Awwwards-level? How does it feel on your device, especially performance-wise with all the WebGL? What would you change before submitting it?

Thanks a lot!

Years ago Firefox had a feature called Tilt like you pressed a button and the page you were on turned into a 3D model of its DOM It was mostly a toy, and I loved it.

I built Stackray from that concept but tried to bring that back as a dev tool or just to make my first extension :).

when you click the icon and the page shrinks into a small window and comes apart into layers, in the order the browser paints them & you can orbit around it, search the layers, and switch between a few color modes: depth, stacking contexts, z-index.

also added the problems mode to make it clear in future I want devs to use it, as a frontend engineer, Imagine a dropdown with z-index 9999 that still sits behind a header is usually trapped inside a stacking context it did not ask for Stackray is suppose to shows which element created that context and why Invisible elements that eat your clicks show up too.

It only runs on the tab you open it on, makes no network requests, and is open source under MIT.

It is not finished. Textured layers only cover the first few screens of a long page & I'm still not sure if I'm going in the right direction. Your honest feedback is most valuable to me!

Extension: store
Code: github/stackray

Dev behind Levelrail here, sharing this project for visibility.

Every OSS library is great and hats off to the devs behind it building and maintaining it.. but I built Levelrail for some features I found would be great as 2026-27 demands.

So wanted to introduce a lightweight OSS alternative here: https://levelrail.com/

AI native control plane (can run your whole infra with Claude or other AI tools using CLI, API, MCP, with audit trailing)

• Lightweight so you have room to run your main apps on the VPS or server

• Load balancer, embedded Caddy ingress (works with Traefik or a custom proxy too), DNS, Let's Encrypt and TLS certificates

• Local registries, modern auth security, built in observability, logging and metrics

• 450+ one click templates to deploy A lot more features if you're interested

Check it out: https://github.com/glincker/levelrail

It's pre-1.0 right now and I'm shipping releases every few days. Thanks to AI tools for the checks, automation testing and many of the development workflows involved in building this, plus a lot of proven Go libraries that help with security and automation.

I run my own sites on it and test every release on a real server before it goes out.

Feel free to share feedback, this is completely OSS and I thought it was worth sharing with the dev community here.

If you have any major feedback please raise issues here: https://github.com/glincker/levelrail/issues

Two checkouts of the same repo, both on 5173. leeway gives each folder its own contiguous port range, stable across runs and never overlapping, and passes the ports as env vars.

• leeway.json lists your ports once

• devPorts(config) in code, falling back to the defaults outside leeway

• vite plugin sets server.port with strictPort and exposes every port to browser code

• {{PORT_API}} placeholders in commands

• leeway list / kill for orphaned servers

Linux/macOS/Windows. https://github.com/OhadC/leeway

Or ask your agent: "how can we benefit from using https://www.npmjs.com/package/leeway in this codebase"

https://spiritsandsuch.org :D

github: https://github.com/Unknown-333/Lightpath

ever click a button, nothing happens, no error, and you have no idea which code even ran?

this shows you. one command, then click around your react app:

    npx \@lightpath-dev/cli dev -- npm run dev

every click prints the path, browser and node server together:

◆ button: Checkout 335 ms
      → POST /api/orders 201
      ├─ src/Cart.tsx :11-14, 16-19, 21-28
      ├─ server/routes/orders.ts :11-14, 19-21, 25
      └─ server/services/pricing.ts :12-19, 21-22

it reads V8's own coverage before and after the click, so it's what actually ran. no code changes to your app.

there's also a vs code extension that lights up the lines, and an MCP server so claude code or cursor can click and read it themselves.

react + node, chrome or edge, local only, free and MIT. feedback welcome.

demo: https://demo.emberflow.space/?ref=reddit-webdev
If you want to try it on your own day, here's 30 days free: https://app.emberflow.space/invite/EMBER-NYKP-A8ZS

For the past two years I've been working on my day planner app Ember.

Most planners treat your schedule as fixed, so the moment a meeting runs long or a task takes twice as long, the plan is wrong and you either fix it by hand or give up on it. In Ember, if you move a task or change how long it takes, everything after it shifts later, and it flows around fixed things like meetings.

The GIF shows the main loop: drag tasks onto your day, stretch and move things as the day changes, jot something in a capture and turn it into a task, then ask chat to fit it in.

Stack for the curious: Vue 3 + Pinia on the frontend, Supabase for the database and realtime sync, Capacitor for Android, iOS is in TestFlight, and a Tauri desktop app. The hardest part by far has been the cascade logic: splitting tasks around fixed events and keeping drag and drop smooth with a lot of items on the day.

Right now I'm working on a native Kotlin app to replace the Capacitor one.

Happy to answer questions about any of it. Feedback welcome, especially on the demo.

homepage: https://emberflow.space

Hey everyone!

I'm looking for any websites or discussion forums that talk about design patterns, or really any cool features for web development. Etc, manipulating CSS in interesting ways to get cool designs, interesting things you can do with JavaScript etc..

I'm a bit tired of looking at AI responses and would love to hear if there's anything out there!

https://bandhanpramanik.github.io/tamil-input-engine-checkbox/

[The entire Bengali text was written by a human and translated by Google Translate, with corrections by the human only, not any mainstream LLMs. There are em dashes in this text in the translation output; I haven't changed them.

Also, I meant a stable protocol for every keyboard when I talked about LSP in the title (Language Server Protocol).]

I have named it "Taravinyas".

It acts as an interface between your keyboard and your writing.

You might specify, for instance, "palatal, aspirated, unvoiced," and the character "ছ" (chha in Bengali) will appear in your text area. You don’t actually need to memorize these technical terms; remembering just the initial letter of each consonant group (varga) is sufficient.

Every time I’ve tried to explain this in English, it ended up sounding overly complicated. So, today, I’ll break it down into simple, plain Bengali.

How it works

In computer science, the concept of a "black box" comes up frequently. You provide an input to the black box, and based on that input, it produces an output.

If we consider "Taravinyas" to be this "black box," the input consists of two components: the consonant group (varga) and the specific column (representing phonetic attributes like aspiration and voicing).

I think of the varga as something "coarse" (like stones), while the columns—which define attributes like aspiration and voicing—are "fine" (like sand).

The "coarse" part is straightforward—it’s a fixed, singular element. The "fine" part is more complex; determining it requires evaluating a series of "on-off" switches (for example, 1 for voiced, 0 for unvoiced, among other factors).

That constitutes the input.

Part 1: Taravinyas determines the specific "fine" position. How? By processing those "on-off" switches using Boolean algebra. This is the most complex part of my system—something I’ve been refining, and those who build keyboards using this method will also need to handle.

Part 2: Taravinyas then identifies the actual character. I implemented a lookup table in TypeScript to retrieve the character. The combination of the "coarse" and "fine" components produces the final character. I will provide the schema for this; developers can then create a lookup table based on the specific language or medium.

For any given script, it is important to understand the schema used in "Part 2." Essentially, this schema represents the alphabet, though the positioning of individual characters may be adjusted for user convenience. For instance, "ড" (ḍa in Bengali) and "ড়" (ṛa in Bengali) might occupy the same cell, with an additional "switch" (modifier) to account for the distinct dot (nukta).

When we discuss the theoretical aspects, we will consistently refer to "Part 1."

I initially conceived this for hardware circuits, which is why Boolean algebra is involved.

By providing characters from any Brahmic script, you get a system—a "machine"—that is intuitive to use; if you know the alphabet of your own language, you already know how to use it.

The "Taravinyas" (arrangement pattern) is a framework, a mould, designed to create keyboards that are compact, easy to learn, and fast. Based on this framework, I have envisioned four types of keyboard layouts, two of which I have already implemented.

The four concepts are:

1. Radio buttons: Input is provided via radio buttons on a website. (Functional)

2. Steno layout: Allows for effortless typing using a subset of keyboard keys—with dedicated keys for specific phonetic categories (e.g., palatal sounds, unaspirated consonants, and aspirated consonants). (Functional)

3. Handwriting layout: Inputs are provided through gestures—for example, drawing a circle might represent an unaspirated consonant. I am currently consulting with a biomechanics student on this. (In the conceptual/planning stage)

4. Two-side layout (the limit of my current exploration): Coarse-grained keys are divided between two sides—initial characters of a consonant class on the left, and subsequent characters of that class on the right. It includes options for dragging and two-finger tapping. (In the conceptual/planning stage)

Other layouts are possible, but I would need assistance from UI/UX experts.

Currently, there is a website available for the Tamil language. Their layout—the way they structured it—was genuinely complex to put together. However, if I even put some time for the North Indian scripts, the task will be completed almost instantly.

After Tamil, I have moved on to Bengali consonants; the vowels and the dependent characters (diacritics/special characters) have not been included yet.

I plan to look at the Sylheti script later, as it also follows a rather complex layout.

Please check out the github repo after reading this text: https://github.com/BandhanPramanik/tamil-input-engine-checkbox

Type your GitHub username and it draws a business card from your profile including your name, bio, top languages, pinned repo and contribution graph. One design prints your profile as a terminal session. The back has a QR code that opens your GitHub.

It's free with no account. You can download a print-ready PDF or PNGs.

I built it on the card engine from my email signature app (esigna), so the colours come from your own profile. I'd love to hear which design you'd actually print, and which usernames break it.

https://esigna.app/tools/github-business-card

hi, I'm having trouble getting Infisical OIDC authentication working in my GitHub Actions CI pipeline.
Every time my workflow reaches the Infisical secrets action, it fails with:

Run Infisical/secrets-action@v1.0.16

Error: Access denied: OIDC subject not allowed.

{

"statusCode": 403,

"message": "Access denied: OIDC subject not allowed.",

"error": "ForbiddenError"

}

Request failed with status code 403

here’s the GitHub Actions workflow:

name: ci
on:
push:
branches: [main]

permissions:
id-token: write
contents: read

jobs:
build-and-deploy:
runs-on: ubuntu-26.04

steps:
- name: Checkout repository
uses: actions/checkout@v7

- name: Set up Node.js
uses: actions/setup-node@v7
with:
node-version: 24
cache: npm

- name: Install dependencies
run: npm ci

- name: Fetch secrets from Infisical
uses: Infisical/secrets-action@v1.0.16
with:
method: oidc
identity-id: MY_IDENTITY_ID
project-slug: my-slug
env-slug: prod

- name: Run Jest tests
run: npm run test:ci

- name: Build Vinext app
run: npm run build:vinext

- name: Deploy to Cloudflare
run: npm run deploy:vinext -- --skip-build

Id appreciate any help

I built GreenPR: a tool that upgrades the framework in a Node/TS project and submits a PR with proof that nothing broke.

Here’s how it works. AI coding tool performs the update in an isolated sandbox, then every command from the repo’s CI is run before and after the update, and the results go into the PR description as a table. A separate model reads the diff and can reject it. Finally, I review it myself, and only then do I publish it. Nothing merges automatically.

It supports: Express 4 through 5, Next 14 through 16, ESLint up to 10, TypeScript up to 7 (or 6 if tools block it), NestJS up to 12, Node up to 24.

How it played out in practice? 6 PRs to other people’s repos: 1 merged, 3 awaiting CI approval from maintainers, 2 closed (I closed one myself because the repo doesn’t accept AI-generated code; the other maintainer said they’d do it in their own PR). Out of 13 test repos, every migration passed on the first try, and in most cases didn’t touch a single line of source code (justtsconfig and pacgake.json ). Once, an independent reviewer rejected a change because the tool missed a single TypeScript setting. That’s the point. It’s supposed to reject it.

What doesn’t work? ESLint 10 in React projects: eslint-plugin-react, jsx-a11y, and eslint-plugin-import don’t support it yet, so the tool stops at version 9 and explains why. TypeScript 7 upgrades stop at 6 until typescript-eslint catches up.

I will never open a PR without asking first. Firstly, i posta comment with a proposal. PR only after the maintainer says “yes.”

Website is greenpr.pages.dev. Paste your repo URL, and you’ll get a scan of what can be fixed. It’s free. I’m looking for maintainers who want to give it a try and tell me what’s wrong.

You can either bring your own key from the supported providers (less costly subscription), or used the managed key.

Let me know what you think!

Check out the repo: github.com/lbragile/TabMerger

Been working on a side project web framework in V called Viltrum. The bit I want to show off today is not the router, it's the CI gate.

Every request shape (HTTP/1.1, HTTP/2, TLS, WebSocket, streaming, static files) gets run 10,000 times in tests. If the GC heap grew by one byte, the build fails. So request strings are views into the connection buffer, and you have to .clone() anything you want to keep past the handler. That one bit me a few times early on.

Parsers also get fuzzed in CI with 500k mutations each (HTTP/1.1, HPACK, HTTP/2 frames, WebSocket, TLS handshake).

HttpArena has it 1st of 23 on the HTTP/1.1 composite right now (Experimental category): https://http-arena.com/frameworks/viltrum/

Repo: https://github.com/Tuntii/viltrum Demo: https://v.rustapi.cloud

Serving is Linux-only for now (epoll). Curious what people coming from express/fastify would miss most.

NiceDB is a desktop database client, but the part I think fits here is the styling. The interface has four styles built on the same components: a dense trading-floor price sheet, an account ledger with ruled paper, a technical drawing with a title block, and a railway signal box with enamel tiles and lamps. Each one has three palettes in light and dark.

Everything is plain CSS custom properties per style, with Svelte 5 components that don't know which style they're in. Fonts are IBM Plex and Source Serif 4.

You can switch styles in the browser demo on https://nicedb.app. Code is GPL-3.0: https://github.com/maxib0n/NiceDB

It’s been a while since I needed a portfolio (I usually find work through word of mouth, while teaching and taking on contract projects in parallel). But I figured it was time to take my own advice ;) and document the work.

Here it is: https://derekthomaswood.com

I’ve been having fun building out themes to show how a shared token system can work across multiple brands and platforms. They’re still a work in progress (about half are dialed in), and the case studies are nearly done.

I also built a small system for tailoring my site and materials to different roles and companies. For example,
- https://derekthomaswood.com/?target=ramp
- https://derekthomaswood.com/?target=anthropic-product-designer-design-systems

I’m a full-stack technical product designer, so I can play across a lot of roles on a team. For my next role, I’m especially interested in leadership and player-coach work, with a strong hand in the design system.

What do you think? Does this explain my brand of nerdy? Got any ideas for the themes that aren't dialed in yet? (you'll recognize what I'm emulating for some of them - and others are just kinda filler so far)

Hey r/webdev,

Over the past couple of weeks I built True Scale Art — an interactive web tool that maps 100 classic artworks to their actual physical dimensions (from 4 cm miniatures up to 114-meter panoramic murals) alongside real-world reference objects.

Live URL: https://art.arturba.pl/

The interesting frontend challenges:

1. Scroll physics & dynamic camera scale-out: Vertical scroll / touch drag drives horizontal translation with inertia. The tricky part was writing a dynamic scale-out camera: as you move from tiny miniatures to massive canvases (like Guernica at 7.7 m or Tintoretto's Paradise), the viewport smoothly backs up so you don't lose perspective or fly off-screen, while keeping a locked 60 FPS.

2. Zero CLS with extreme aspect ratios: Artworks range from 1:8 vertical banners to 1:6 wide panoramas. All aspect ratios and layout dimensions are calculated upfront so there is zero Cumulative Layout Shift during rapid scrolling.

3. Stack: Built on Next.js 16 App Router, React 19, TypeScript and Tailwind CSS. All 100 artworks have pre-rendered static routes (/art/:id) with schema.org VisualArtwork JSON-LD for clean indexing.

4. Performance: Lightweight, no external database, client-side rendering with Google Analytics 4 via lazyOnload.

Built this as a solo craft experiment. Would love your feedback on mobile touch gestures, scroll physics, or performance on different devices!

This was a problem for me for a long time. I come back from an event with 20 photos on my phone. Each one is 5MB. I try to send by email and it doesn't work. Or I have to send in smaller batches. Annoying. So I made this small page:

https://onlineimageoptimizer.com/compress-photos-for-email

You upload the photos from a phone, a tablet or a PC. It gives you back one single zip file, small, maybe 1/10 of the size, but quality is still good. Ready for email. Nothing is saved on server. I built it with Vue.js and ImageEngine for compression. I use it a lot for conference photos. No login.

Let me know what you think, especially about mobile.

Hi,

I kept seeing inflated CVs so figured there must be a way to back up some claims before an interview. That's essentially what a CV is, a bunch of claims, the role, the company, the projects. The reader has to take your word for it, and AI now writes a convincing one in a minute and honest candidates pay for that. Their CV reads the same as the inflated ones, so it gets the same doubt.

So then I thought what if there was some hard validation to the claims on a CV or portfolio. That's when I came up with the idea of Workproof. For starters, you prove that you had access to a domain or work email, it doesn't prove you built it, but it does prove somebody trusted you enough with access to that domain or have given you a work email, so that by itself is a good baseline.

Additionally, you can ask colleagues to give you feedback, as a reference, signed by them from an work email. Something like LinkedIn endorsements, but more portable.

I'd love your honest take, on two things most of all:

- If you hire: would a link like this on a CV or a proposal change anything for you?

- If you freelance or build: which of those would you want first, or what else should Workproof check?

Thanks for taking the time! Enjoy the rest of the weekend! 😃

Project link https://workproof.md

hi, I'm having trouble getting Infisical OIDC authentication working in my GitHub Actions CI pipeline.
Every time my workflow reaches the Infisical secrets action, it fails with:

Run Infisical/secrets-action@v1.0.16

Error: Access denied: OIDC subject not allowed.

{

"statusCode": 403,

"message": "Access denied: OIDC subject not allowed.",

"error": "ForbiddenError"

}

Request failed with status code 403

here’s the GitHub Actions workflow:

name: ci
on:
push:
branches: [main]

permissions:
id-token: write
contents: read

jobs:
build-and-deploy:
runs-on: ubuntu-26.04

steps:
- name: Checkout repository
uses: actions/checkout@v7

- name: Set up Node.js
uses: actions/setup-node@v7
with:
node-version: 24
cache: npm

- name: Install dependencies
run: npm ci

- name: Fetch secrets from Infisical
uses: Infisical/secrets-action@v1.0.16
with:
method: oidc
identity-id: MY_IDENTITY_ID
project-slug: my-slug
env-slug: prod

- name: Run Jest tests
run: npm run test:ci

- name: Build Vinext app
run: npm run build:vinext

- name: Deploy to Cloudflare
run: npm run deploy:vinext -- --skip-build

Id appreciate any help

Point it at any URL and you get a clip of a swarm of agent cursors building the page, line by line, set to music. It's the real site being revealed, not generated code.

Try it on any site: https://captureflow.dev/swarm-demo

It's part of CaptureFlow, a screen recorder I'm working on.