Creating UX with TEXT(markdown)

gochev

Nayden Gochev

Posted on March 31, 2022

Creating UX with TEXT(markdown)

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: *___
===



Enter fullscreen mode Exit fullscreen mode

Which generates this

Image description

if you want to customize the buttons you can for example




===Login===
username : ___
password: *___
===[login][dont login]===



Enter fullscreen mode Exit fullscreen mode

Will give you this:

Image description

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.

Image description

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*



Enter fullscreen mode Exit fullscreen mode

Which will generate this :

Image description

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 :)

💖 💪 🙅 🚩
gochev
Nayden Gochev

Posted on March 31, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related