What are some graphic design environments that are fundamentally markup-code-based?

In other words, an environment where you do graphic design not with a WYSIWYG-style drag-and-drop interface, but rather by describing/experimenting with a graphic design via writing declarative code.

One example is the Blueprint CSS Framework.

  • 3
    ANY web based layout.
    – Scott
    Commented Nov 25, 2012 at 22:47

3 Answers 3


Off the top of my head:

  • Canvas
  • Processing / Processing.js
  • Nodebox
  • Cinder
  • Raphael
  • D3
  • Paper.js
  • CSS

Some of these have work-environments to make it easier but all of them are code based and can be done in a regular text editor. Except Cinder which is more advanced and required a platform to code C++ in. If nothing else though Cinder's website gallery and forum gallery has some really amazing projects.

  • Unfortunately, Javascript is not so much design oriented as DOM-oriented. HTML + CSS is, though HTML on its own was never intended for design, merely a rough mark-up of elements in a text, ie. Hyper-Text Markup Language.
    – user7179
    Commented Nov 25, 2012 at 23:55
  • HTML+CSS is not graphic design oriented. Thats web design. You can't draw say a house in HTML/CSS. You can in everything I listed (except maybe D3... not sure. I imagine you can but it would be hard)
    – Ryan
    Commented Nov 26, 2012 at 0:08
  • These are all fuzzy terms. JS can manipulate the visual design. It can also add interaction design. HTML can be considered information design. All of it can fall under an umbrella of graphic design, broadly speaking.
    – DA01
    Commented Nov 26, 2012 at 2:22

This question is quite vague as-is. Are you referring to markup? Code? Both? Anything non-WYSIWG?

What do you mean by design? Just the visual presentation?

CSS is a way to add visual presentation to markup, in this case HTML. HTML could be considered design in the sense of information design and content design. But it's not necessarily visual in and of itself. JS is technically code, not markup. But JS can certainly manipulate the visual design, and also create interaction design layers on top of the visual design.

And there's other markup languages that can be styled as well...XML, SVG, PostScript, etc.

As for your example of 'blueprint CSS framework' that's a particular pre-built set of CSS rules. If that's what you are asking, then there are plenty of CSS frameworks out there.


Blueprint is an all around CSS framework, it doesn't make you design a complete website.

Talking about html, as today i can recommend those tools who can help develop your website UI, as alternatives to Blueprint:

  • Twitter Bootstrap (HTML5)
  • jQuery UI (most compatible)
  • 960grid (lightweight grid system)

For graphics and interactions, you can use

  • Raphael JS (svg based)
  • Paper.js (canvas based, i prefer this one)
  • Processing

Other non html language for design and typography may include TeX.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.