Creating UX with TEXT(markdown)
Nayden Gochev
Posted on March 31, 2022
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 :)
Posted on March 31, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.