Hello everyone, I would like to present an IDEA or a sideproject ;) I play with for a while now.
Who am I
I am a coder/programmer, not a UX person but very often I have to create some UX screens. Also, I know many of you are creating UX screens quite fast in tools like Figma and etc but it still takes time to create the wireframes, align everything to export it to share it and so on.
I am a HUGE fan of Markdown so I was thinking can we use Markdown to create a mockup ? or wireframes?
So at the end, I created something I call utext spelt as "you text" so you text and get UX.
The POC
Currently, I have only POC the grammar and language and parser are created using https://pegjs.org/ as parser/translator of the code.
You can play with the project see here https://utext.github.io/
if you click on the "?" and wait a bit you will see some examples.
But just to show if you want to display a login form for example it will look like this :
===Login===
username : ___
password: *___
===
Which generates this
if you want to customize the buttons you can for example
===Login===
username : ___
password: *___
===[login][dont login]===
Will give you this:
The idea is to VISUALLY explain what and how it should look and voala you have the wireframe. I even went a step further you can export this as HTML code even and even change the theme if you want to see how it looks with different UI.
All the elements supported are basically everything from HTML + some bootsrap elements. You can check them in the help at the ? in the website.
A Card example will be something like this
---Bootstrap Cards works too---
I am the content [random btn]
you can otuput a table too :
|header1|header2|
|col1 |col2 |
|col1|col2|
---
*Note should start and end with at least 3 dashes*
Which will generate this :
Any feedback is welcome :) I just made it for fun :) and just want to hear how this looks to you :) any comments ?
A yes most markdown stuff like image or heading and etc just work, go play with it :) bugs are expected ! :)
P.S. Since it is a plain JavaScript (no server side) you can save only in gist in your github account or load a gist... or copy paste :)
Top comments (8)
Someone pointed this plantuml.com/salt which is close but to be fair I like mine more 🤣🤣
If yours doesn't have the obnoxious ads this salt thing has, I'd agree in a heartbeat.
Those ads are distracting; would never be able to get into any sort of zone with that.
hah will never have ads :)
It is a project made for fun :) not for profit :)
Looks beautiful
haah thanks :)) mostly used some css snippets from code pen :) for the phone frame
I know there's a time... but...
I'm looking for something like this... but with a small difference... I think it could generate .png files from original.
But also I already tried a parse, but with purpose of project management, and at the end I decided to abandon.
Cool tool!
I wanted to print as well but it turns out you can't print with JavaScript a div or part of a page. You can't even take screenshot except simply Ctrl+p or print so that's why I didn't added export png
I translated this article here to Brazilian Portuguese.
Thanks, 😉