Like Astro, if Astro were made for React.

Zero JavaScript
until a page needs it.

Write it in React, style it with your own CSS, or hand it to your agent: every page ships as plain HTML, and only the components you mark "use client" wake up in the browser.

npm create pagedeck
Read the docs

Islands, like Astro. React all the way down.

  • Islands

    Start a component with "use client" once, in its own file, not at every place you use it. Each page that renders it gets it as an island, and no other page pays for it.

  • Zero JavaScript by default

    A page with nothing interactive ships plain HTML and CSS, without one script tag.

  • React all the way down

    Pages, layouts and islands are all React components. There is no template language to learn and no wrapper file to write.

0 B

of JavaScript on a page with nothing interactive

This page, measured by its own build. One byte more fails the build.

See what one island costs ›

Unstyled, your look.

pagedeck ships no CSS, no theme and no part names to learn: the markup is your own React. Here is one component, rendered twice from the same CMS entry. Only the stylesheet changes, and neither one costs a byte of JavaScript.

Paper
Paper CSS · 22 lines
.paper .teaser {
  padding: 36px 32px;
  border-radius: 2px;
  background: #f4efe6;
  color: #2b2118;
  font-family: Georgia, "Times New Roman", serif;
  box-shadow: 0 18px 40px rgb(0 0 0 / .4);
}
.paper .teaser h3 {
  margin: 0 0 8px;
  font-size: 34px;
  font-style: italic;
  font-weight: 400;
}
.paper .teaser p {
  margin: 0 0 18px;
  font-size: 18px;
  line-height: 1.5;
}
.paper .teaser a {
  color: #8a3b12;
}
Signal
Signal CSS · 36 lines
.signal .teaser {
  display: grid;
  gap: 12px;
  padding: 24px;
  border: 2px solid #3ddc97;
  background: #000;
  color: #3ddc97;
  font-family: ui-monospace, Menlo, monospace;
  text-transform: uppercase;
}
.signal .teaser h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: .08em;
}
.signal .teaser h3::after {
  content: "";
  display: inline-block;
  width: .6em;
  height: 1em;
  margin-left: .3em;
  vertical-align: -.15em;
  background: currentcolor;
}
.signal .teaser p {
  margin: 0;
  font-size: 14px;
}
.signal .teaser a {
  justify-self: start;
  padding: 8px 14px;
  background: #3ddc97;
  color: #000;
  font-size: 14px;
  text-decoration: none;
}
See an island ›See the server data ›

Small, leans on the browser.

The browser already knows how to show a page. pagedeck hands it finished HTML and steps aside, so the only JavaScript on a page is the JavaScript that page asked for.

Built for agents.

Whether you write the code or your coding agent does, pagedeck leaves less to guess.

Accessible by default.

pagedeck looks after landmarks and search for you, for the keyboard and the screen reader alike. Each line below is backed by a test in pagedeck's own repo.

Try the search ›

pagedeck is part of deck.cool, a family of unstyled React packages that look like you and work like the browser. Meet the family ›