DEV Community

Cover image for Creating UX with TEXT(markdown)
Nayden Gochev
Nayden Gochev

Posted on

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

Top comments (8)

Collapse
 
gochev profile image
Nayden Gochev

Someone pointed this plantuml.com/salt which is close but to be fair I like mine more 🤣🤣

Collapse
 
jzombie profile image
jzombie

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.

Collapse
 
gochev profile image
Nayden Gochev

hah will never have ads :)

It is a project made for fun :) not for profit :)

Collapse
 
tmchuynh profile image
Tina Huynh

Looks beautiful

Collapse
 
gochev profile image
Nayden Gochev

haah thanks :)) mostly used some css snippets from code pen :) for the phone frame

Collapse
 
joaozitopolo profile image
Joao Polo

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!

Collapse
 
gochev profile image
Nayden Gochev

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

Collapse
 
dougsource profile image
doug-source

I translated this article here to Brazilian Portuguese.

Thanks, 😉