My First Open Source Project: Bringing Flutter Layouts to React

Nishan Bhuinya — Sun, 28 Dec 2025 13:32:03 +0000

TL;DR

I built LAYR - a TypeScript library that brings Flutter's intuitive layout system to React. This is my first open-source project, and I'd love your feedback!

🎮 Try the interactive playground: layr.dynshift.com

The Journey: From Flutter to React

I started my development journey with Flutter. Building mobile apps felt natural - Container, Row, Column, Stack - everything made sense. The layout system was intuitive and predictable.

Then I moved to web development with React.

The Learning Curve Hit Hard

CSS-in-JS, Flexbox properties, remembering which properties go where, wrestling with justify-content vs align-items... I kept thinking:

"Why can't this be as simple as Flutter?"

The "Ah!" Moment

After the 10th time googling "flexbox center div" (we've all been there 😅), I decided to build what I wished existed.

What if React had Flutter's layout primitives?

Introducing LAYR

LAYR is a TypeScript-first React library that gives you Flutter-style components:

Container

<Container
  padding={20}
  margin={10}
  color="#f0f0f0"
  borderRadius={8}
>
  <Text>No more CSS mental gymnastics</Text>
</Container>

Row & Column

<Row mainAxisAlignment="spaceBetween" crossAxisAlignment="center">
  <Text>Item 1</Text>
  <Text>Item 2</Text>
  <Text>Item 3</Text>
</Row>

Stack

<Stack>
  <Container width={200} height={200} color="#blue" />
  <Positioned top={10} right={10}>
    <Text>Overlaid content</Text>
  </Positioned>
</Stack>

Why This Approach?

1. Cognitive Load Reduction

Instead of remembering 50+ CSS properties, you use familiar props like padding, margin, alignment.

2. TypeScript Autocomplete

Your IDE shows exactly what props are available. No more switching to MDN.

3. Declarative & Readable

Code reads like a description of what you want, not how to achieve it.

4. Zero Dependencies

The entire library is self-contained. No bloat.

The Technical Challenge

Building this taught me a lot about:

TypeScript generics - Making props type-safe while remaining flexible
CSS-in-JS performance - Optimizing inline styles for React
API design - Balancing familiarity (Flutter) with idiomatic React
Documentation - Building an interactive playground from scratch

The playground alone was a project in itself - live code editing, real-time preview, syntax highlighting. Huge learning experience!

What I Learned as a First-Time OSS Creator

1. Documentation is as important as code

I spent almost as much time on docs as on the library itself. The interactive playground became the best teacher.

2. TypeScript is your friend

Type safety caught so many bugs before users ever saw them. The autocomplete experience makes or breaks a library.

3. Keep it focused

I resisted adding every feature I thought of. LAYR does one thing well: layouts.

4. Ship it imperfect

I could've spent 6 more months "perfecting" it. Instead, I shipped and learned from real feedback.

Try It Yourself

Don't take my word for it - try the interactive playground:

👉 https://layr.dynshift.com

The playground has live examples for:

Card layouts
Responsive grids
Overlapping elements
Complex compositions

All editable in real-time!

Installation

npm install @dynshift/layr

Then import and use:

import { Container, Row, Column } from '@dynshift/layr';

function App() {
  return (
    <Container padding={20}>
      <Row mainAxisAlignment="center">
        <Text>Hello LAYR!</Text>
      </Row>
    </Container>
  );
}

I Need Your Feedback!

As a first OSS project, I'm genuinely curious:

For React developers:

Would you use this in production?
What's missing that would make it more useful?
Any concerns about the approach?

For Flutter developers moving to React:

Does this feel familiar enough?
What other Flutter widgets would you want?

For everyone:

Check out the GitHub repo: https://github.com/nishanbhuinya/layr
Try the playground: https://layr.dynshift.com
Open issues for bugs/features
⭐ Star if you find it useful!

What's Next?

I'm actively working on:

More comprehensive docs
Additional Flutter-inspired widgets (Expanded, Flexible, etc.)
Performance optimizations
Your suggestions!

Final Thoughts

Building LAYR taught me that open source isn't just about code - it's about solving real problems and sharing solutions with the community.

If you've ever struggled with CSS layouts in React, or if you're a Flutter dev making the jump to web, I hope LAYR makes your life a bit easier.

Drop a comment - I'd love to hear your thoughts, criticisms, and suggestions! 🙏

Happy coding! 🚀

DEV Community: Nishan Bhuinya