DEV Community

Nishan Bhuinya
Nishan Bhuinya

Posted on

My First Open Source Project: Bringing Flutter Layouts to React

#react #opensource #flutter #webdev

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>
Enter fullscreen mode Exit fullscreen mode

Row & Column 

<Row mainAxisAlignment="spaceBetween" crossAxisAlignment="center">
  <Text>Item 1</Text>
  <Text>Item 2</Text>
  <Text>Item 3</Text>
</Row>
Enter fullscreen mode Exit fullscreen mode

Stack 

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

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
Enter fullscreen mode Exit fullscreen mode

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>
  );
}
Enter fullscreen mode Exit fullscreen mode

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:

What's Next?

I'm actively working on:

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

Links

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! 🚀

Top comments (0)