---
title: "Split to Edit"
url: "https://sanyam.sh/lab/split-to-edit"
date: "2025-09-04"
---

# Split to Edit

my take on `split-to-edit` interaction. built using Next.js + Framer Motion.

allow smooth transition wrapped within `LayoutGroup` + shared `layoutId` on the three segments i.e animates the position/size between "together" and "separated" layouts.

use `contentEditable` instead of inputs to maintain pixel perfect UI, `settleBordersAfter()` delays switching inner corners from rounded to sharp, so borders don't snap immediately after saving.

- Source: https://x.com/sanyampunia/status/1963333460065391066