Your keyboard.
Your colors.

Pick a key, give it a color, and add a logo. Resize the keyboard or shuffle the palette to try something unexpected.

rows

cols

Hover a key in the 3D view to press it. Click a key to edit it.

key:1

Enter an image URL or a logo name from thesvg.org, such as react. Remote hosts must allow CORS. Clear the URL and apply to remove the logo.

edit a key or resize the grid…

Edit keyboard configuration

config.json

{
  "rows": 4,
  "cols": 6,
  "keys": [
    {"color":"#ff9408","logo":"javascript"},
    {"color":"#008fd5","logo":"typescript"},
    {"color":"#ff480a","logo":"supabase"},
    {"color":"#633595","logo":"trpc"},
    {"color":"#00cce8","logo":"react"},
    {"color":"#00b880","logo":"vuedotjs"},
    {"color":"#333537","logo":"nextdotjs"},
    {"color":"#00bfd8","logo":"tailwind-css"},
    {"color":"#00952c","logo":"nodedotjs"},
    {"color":"#343638","logo":"express"},
    {"color":"#146888","logo":"postgresql"},
    {"color":"#00c51b","logo":"mongodb"},
    {"color":"#ff4622","logo":"hono"},
    {"color":"#343638","logo":"turborepo"},
    {"color":"#18333e","logo":"prisma"},
    {"color":"#f50032","logo":"redis"},
    {"color":"#efbe00","logo":"firebase"},
    {"color":"#007d9f","logo":"cloudflare"},
    {"color":"#333537","logo":"socketdotio"},
    {"color":"#009fe8","logo":"docker"},
    {"color":"#00a20b","logo":"drizzle"},
    {"color":"#ff9208","logo":"gsap"},
    {"color":"#009f18","logo":"python"},
    {"color":"#303234","logo":"vercel"}
  ]
}

paste a config here and apply

Learn how live material changes work

Loading keycaps...

Your keyboard.Your colors.

Your keyboard.
Your colors.