imagineui / imagineui

CLI tool to generate wireframes from a localized human-readable format

ImagineUI

ImagineUI is a tool that supports developing wireframes in a localized human-readable format.

Try it out

⚠️ Early alpha. Things may break. 🔧 🚧

Please provide feedback and vote for features on the issues page

To get involved you can also refer to the thought process doc (quazi-white paper) and share your thoughts at [email protected]

Usage

Editor

Full demo: https://imagineui.github.io

Latest core (master branch, used for CLI): https://imagineui.netlify.app/

CLI

npx imagineui-cli --input=%full-path-to-.scene% --outputDir=%full-path-to-folder%

Multiple --input paths are allowed for batch rendering (so that puppeteer only launches once) To speed up launching the npx command it is advised to install imagineui-cli globally, so that puppeteer is only downloaded once.

npm install -g imagineui-cli

Caveats:

• On some systems ~ does not get substituted for /home/%username% yet

imagineui's Issues

CLI command to generate images doesn't work

I get an error trying to generate a picture out of ImagineUI digram.

Steps to reproduce:

1. npm install -g puppeteer
2. git clone [email protected]:imagineui/imagineui.git
3. cd imagineui
4. yarn
5. yarn start --input=~/imagineui_sandbox/test.scene --output=~/imagineui_sandbox/test.png

imagineui working dir and directory with the scene differs

Expected result: generated image

Actual result: error

yarn start --input=~/imagineui_sandbox/test.scene --output=~/imagineui_sandbox/test.png
yarn run v1.22.4
$ yarn workspace imagineui-cli start:built --input=~/imagineui_sandbox/test.scene --output=~/imagineui_sandbox/test.png
$ node ./build/bundle.js --input=~/imagineui_sandbox/test.scene --output=~/imagineui_sandbox/test.png
error: unknown option `--output'
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.
Exit code: 1
Command: /usr/local/Cellar/node/13.13.0_1/bin/node
Arguments: /usr/local/Cellar/yarn/1.22.4/libexec/lib/cli.js start:built --input=~/imagineui_sandbox/test.scene --output=~/imagineui_sandbox/test.png
Directory: /Users/user/Codebase/imagineui/packages/imagineui-cli
Output:

info Visit https://yarnpkg.com/en/docs/cli/workspace for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Any plans on `grid` element?

Great job, thanks!

Do you have any plans to implement a grid element?
Like moqups or balsamiq using CSV format.

Table 
    "Header one",  "Header two",  "Header three"
    "lorem", "ipsum", "dolor"

Or, following your style, something like:

Table 
    Three columns
    Two rows
    Header: "one" "two" "three"
    "lorem" "ipsum" "dolor"

Support for microframe elements

I believe that Imagineui could perfectly fit a dead spot in UI tooling—lower fidelity mockups aka microframes.

There are lots of tools for thorough UI prototyping, but there are not so much intended just for, let's say, informational prototyping. And here Imagineui could save time and efforts for, to give one example, product owners and system/business analysts when they want to show designers what the screen should contain, but not dictate them how the interface should look.

A couple of relevant articles about microframes:

• https://cacoo.com/blog/why-every-team-should-use-microframes/
• https://www.uxpin.com/studio/blog/next-generation-wireframes-microframes/

Get rid of puppeteer

If we could get rid of puppeteer, we would be able to speed up imagineui-cli and make configuring it in CI/CD environments less complicated

Prerequisites:

• #35

Possible solutions for element sizing:

• https://github.com/cztomsik/graffiti (no easy way to export SVG)
• Get back to yoga layouts and a manual SVG renderer (tedious)
  https://observablehq.com/@tvogels/flexbox-layout-in-svg-with-yoga-version-2
• https://github.com/devongovett/node-wkhtmltopdf (marginally better then puppeteer)

Careful:

• If #37 is completed before #36, this influences the choice of the layout engine

Browser demo hangs when trying to complete tokens starting with double-quote

Steps to reproduce

1. Go to the Sandbox.

2. Place the cursor on the line

   Blocks "Description", "Subscription" aligned in two columns
   

   after "Subscription".

3. Enter a comma, open a double-quote, start typing "Partners":

   

Expected behavior

You can either finish typing "Partners" or select it from the completion suggestions popup.

Actual behavior

The page starts responding slower the more characters (after the opening double-quote) you type, until it hangs. It also hangs if you select a suggestion.

Environment

The issue can be reproduced in the following browsers:

• Mozilla/5.0 (X11; Linux x86_64; rv:69.0) Gecko/20100101 Firefox/69.0.
• Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:73.0) Gecko/20100101 Firefox/73.0
• Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36

Block composition proposals #1

The overarching goal of ImagineUI is to allow for defining simple low-fidelity wireframes with a simple format.

One of the ways I am trying to make sure the format fits the purpose, is to make a bunch of benchmark layouts and try to recreate them.

Here's an arbitrarily complex interface of an imaginary task tracker.
It was crudely drawn using a different tool as a reference.

More benchmarks that will prove the lack of features or show that the format is cumbersome in common situations are welcome, but in this thread we will focus on breaking down this one.

The closest thing semantically would be this gist, but if you try to copy and paste it to the ImagineUI Sandbox, you would get something very poorly structured visually.
https://gist.github.com/v4dkou/aa36eb8d98ab6be8e435e9168bb5f04d

The .scene format CAN represent some of these blocks, but it fails at:

• Section composition: you can put two columns under a header, but you cannot put a sidebar to the left of it all.
• Lists: there's no way to position elements inside a repeating block for now
• Image sizing: there are no directives to set sizes for an image
• Element alignment (i.e. we can't position the "In Progress" tag or the comment timestamp into right corners)

We need to find concepts that would allow to position elements close to the benchmark above, without sacrificing the clarity of the text-based UI definition.
If we solve 80% of cases by adding one or two concepts, I would call it a success.
That's why all the proposals are combined into a single thread, so we can cherry-pick the most useful features from each proposal to get a short list of the high-priority syntax extensions.

Let's post some proposals and vote with 👍/👎 reactions. Multiple votes are encouraged.
Please follow this template for a proposal

### Proposal: <Proposal name>
<Image that highlights what problem the proposal is solving>

<Code insert with the proposed syntax>

<Reasoning>

The thread will be locked once some of the features get released so as to preserve the history of this decision.

Get rid of Shadow DOM

Currently, ImagineUI uses an awesome library called wired-elements

However, this library heavily relies upon Shadow DOM and there's no way to render it as is without an actual browser environment, which is why for CLI we have to use puppeteer.

Getting rid of Shadow DOM is obviously out of scope for wired-elements: they are a Web Components library after all.
rough-stuff/wired-elements#16

However, reimplementing every element with RoughJS seems like a waste of development effort for ImagineUI's goals.

We can try to reimplement a subset of Shadow DOM used by wired-elements through the lit library and substitute it through polyfills or Webpack aliasing

Relevant links:
https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs
lit/lit-element#42

Different visualization styles

It will be nice to have not only cartoon-style elements skin but more formal and less "handwritten" ones as well.

Basic theming

We need to expose the ability to configure colors of the wireframe.

wired-elements already use stroke: currentColor for its elements, so applying this method to parts that are currently unaffected by color seems like the cleanest solution.

The github pages (imagineui.github.io) is down

Support bun runtime

Prerequisites:

• oven-sh/bun#888
• #36

Static file generation without need for react

It would be great to integrate this into any page without the need to get all of react into it. I can imagine, that the current state can work completely with templating engines like twig, handlebar or pug or so. I can imagine this being a lightweight implementation.

Is this project discontinued? the web (http://imagineui.io/) is down

I'm trying to find plantuml salt alternative.

SVG output in CLI

If imagineui-cli could emit .svg instead of .png, we would be able to:post-process SVGs with any external tool that supports SVGs, ranging from vector graphics editors (Illustrator, Inkscape, Figma), to image processing libraries and scripting tools (ImageMagick, sharp, etc.)

That would significantly simplify integration of ImagineUI to other tools.

Before we ditch puppeteer, there's an "easy" way out:
https://github.com/felixfbecker/dom-to-svg

If we finish ditching puppeteer (see task #36), we'll have to figure a lot of stuff out ourselves.