DEV Community

Reaper
Reaper

Posted on

3

Another stupid idea - another mini tool

People who've been reading for a while already know what I build and when I build them and they also already know where this post is headed. (For them: the link is at the end people)

Anyway, I have been looking for a simpler react playground for a while now.

"Codesandbox?"

  • nah that's just too much feature set.

"Setup a personal storybook?"

  • nope.

"Dude! Just import react scripts in codepen and go with it!"

  • That's something I did for a while now, but then I got lazier and also upset by the fact that no one thought of building something minimal.

Guess what.. I did.

I went so minimal I didn't even spend time thinking for a name, I was watching a youtube video, the guys says "hen" and I was like , "Yeah, that's going to be the name!"

Now, I wanted to get as excited as a teleshopping host but I don't have that much energy at the moment.

Short Description

It renders your react components in real time so you can use it for designing components or try out that new css experiment you just read about on CSS Tricks.

Hen

I'm out.

Updates:

  • Fixed the loss of focus on input state changes and smoother renders

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (4)

Collapse
 
alexanderjanke profile image
Alex Janke

Looks pretty neat as a little sandboxy-tool that works on the fly!

If you're open to suggestions:

  • Maybe increase the font size in the editor-window just a tad? Seems a little small, especially when mixed with the orange font. Or even better add a slider/option so the users can choose the font site for themselves. For extra convenience save the value in localStorage
  • Dark mode? Those poor people opening the site past midnight :)
  • A hotkey to format the code. Maybe use the VsCode one (Alt + Shift + F)

I don't use React at all but is it intended that the textbox looses focus whenever you enter a character into the textbox?

Collapse
 
barelyhuman profile image
Reaper • Edited

I'm aware of the focus issue and trying to figure out why the re render occurs and puts the focus away.

1 , 2nd they are in scope, I normally post unfinished projects here and based on user response decide whether I should work on it. Plan on adding multiple themes for the editor and the app like Twitter

the shortcut key is added in the local build of mine, will deploy that soon

Still, a huge thanks for the suggestions

Collapse
 
dance2die profile image
Sung M. Kim

Not a stupid idea :)
& like the name

Collapse
 
barelyhuman profile image
Reaper

😂 thanks.
I did end up finding that the editor is laggy and now working on a custom web code editor.
That can get the job done

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay