DEV Community

loading...

Another stupid idea - another mini tool

barelyhuman profile image Reaper ・1 min read

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

Discussion (4)

pic
Editor guide
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 Author • 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 Author

😂 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