domo is a JavaScript library that pulls HTML markup and CSS style into JavaScript syntax, in the browser and on the server. It's a simpler, easier, and more reliable alternative to template engines and CSS pre-processors. You can find it on github and npm.
The following is a simple, self-contained example using domo in the browser. It generates a DOM tree and replaces the existing documentElement, using a plain old function as a CSS mixin.
<!doctype html>
<script src="domo.js"></script>
<script>
HTML({lang: "en"},
HEAD(
TITLE("Hello, world"),
STYLE({type: "text/css"},
CSS("#container",
{backgroundColor: "#eee"},
roundedCorners(5)
)
)
),
BODY(
DIV({id: "container"},
"For more details about domo, see the source: ",
BR,
BR,
A({href: "//github.com/jed/domo/blob/master/domo.js"}, "View source")
)
)
)
function roundedCorners(radius) {
return {
borderRadius : radius,
WebkitBorderRadius : radius,
MozBorderRadius : radius
}
}
</script>
Reduce your exposure to XSS attacks. Writing straight from JavaScript to DOM without an HTML step means you don't need to rely on a library to sanitize your rendered data because the browser does it for you automatically.
Eliminate a separate compile step. With DOM builders, "compilation" is done in the same JavaScript process as your code, which means that any syntax errors are thrown with line numbers in the same JavaScript process.
Don't let implentations drive architectural decisions. If you're writing a view that renders a DOM node, you can write it directly within the rendering code for convenience, and then pull it out into its own file when the size of your app requires it.
Use JavaScript syntax everywhere. Instead of remembering which HAML or LESS symbols map to which behaviors like looping or escaping or conditionals or negation, just use JavaScript.
domo provides functions for CSS rules and HTML5 element types, allowing you to create DOM objects anywhere in your code without compiling templates from separate script tags.
By default, domo extends the global object (window in the browser or global in node) with itself and all of its DOM/CSS functions. This allows you to access them directly, and write code that behaves like a DSL, but without any compilation step.
If polluting the global namespace isn't your style, you can call domo.noConflict(). This function restores all overwritten global object properties and returns the original namespace, much like its jQuery namesake.
This returns a new DOM element of the specified name, with the optionally specified attributes, and child nodes. If the element name is HTML, the current document element will also be replaced with the returned element.
element can be any of the following valid HTML5 tag names: A, ABBR, ACRONYM, ADDRESS, AREA, ARTICLE, ASIDE, AUDIO, B, BDI, BDO, BIG, BLOCKQUOTE, BODY, BR, BUTTON, CANVAS, CAPTION, CITE, CODE, COL, COLGROUP, COMMAND, DATALIST, DD, DEL, DETAILS, DFN, DIV, DL, DT, EM, EMBED, FIELDSET, FIGCAPTION, FIGURE, FOOTER, FORM, FRAME, FRAMESET, H1, H2, H3, H4, H5, H6, HEAD, HEADER, HGROUP, HR, HTML, I, IFRAME, IMG, INPUT, INS, KBD, KEYGEN, LABEL, LEGEND, LI, LINK, MAP, MARK, META, METER, NAV, NOSCRIPT, OBJECT, OL, OPTGROUP, OPTION, OUTPUT, P, PARAM, PRE, PROGRESS, Q, RP, RT, RUBY, SAMP, SCRIPT, SECTION, SELECT, SMALL, SOURCE, SPAN, SPLIT, STRONG, STYLE, SUB, SUMMARY, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TIME, TITLE, TR, TRACK, TT, UL, VAR, VIDEO, or WBR.
The first argument is an optional attributes object, mapping camelCased attribute names to attribute values.
All subsequent arguments are optional and appended as child nodes, merging any array arguments. Each child is appended as is if it's already a node (has a nodeType property), or converted to a text node otherwise. This allows you to append any DOM node generated elsewhere.
This returns a CSS rule string with the specified selector and properties, for use in a stylesheet.
The first argument is a required string representing the CSS selector.
All subsequent arguments are optional objects mapping property names to property values. camelCased property names are converted to lower-case hyphenated names, and number values converted to pixels.
Multiple arguments are merged into a single property list, giving you two of the benefits of using a CSS pre-processor like LESS:
STYLE({type: "text/css"},
CSS("a", {color: "red"},
CSS("img", {borderWidth: 0})
)
)
STYLE({type: "text/css"},
CSS("a", {color: "red"}),
CSS("a img", {borderWidth: 0})
)
function roundedCorners(radius) {
return {
borderRadius : radius,
WebkitBorderRadius : radius,
MozBorderRadius : radius
}
}
STYLE({type: "text/css"},
CSS("h1", roundedCorners(10)),
CSS("h2", roundedCorners(5))
)
Coming soon.
Coming soon.
domo really shines when used to build DOM code on the client. But since you'll likely need to render an HTML client in the first place, domo also ships with a window.document shim that can be used to render HTML on the server. It's a small (under 1KB minizipped) mock DOM implementation with just enough logic to render HTML.
Once you've run npm install domo, the API for the server is the same as that for the client. Just require("domo"), create a DOM, and then use the outerHTML property to serialize it into HTML. domo also adds a top-level DOCUMENT function for creating an entire HTML document with doctype, like this:
require("domo")
var document =
DOCUMENT({type: "html"}
HTML(
HEAD(
SCRIPT({src: "/app.js"})
),
BODY("Loading...")
)
)
console.log(document.outerHTML)
which would render into this:
<!DOCTYPE html>
<html><head><script src="/app.js"></script></head><body>Loading...</body></html>
Some things to note about using domo on the server:
DOCUMENT are optional, with the type attribute defaulting to html.outerHTML is available on the document and every element, and is a lazy ES5 getter that calls toString() for performance.Coming soon.
FAQs
Markup, style, and code in one language.
The npm package domo receives a total of 20 weekly downloads. As such, domo popularity was classified as not popular.
We found that domo demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Socket researchers uncover how threat actors weaponize Discord across the npm, PyPI, and RubyGems ecosystems to exfiltrate sensitive data.
Security News
Socket now integrates with Bun 1.3’s Security Scanner API to block risky packages at install time and enforce your organization’s policies in local dev and CI.
Research
The Socket Threat Research Team is tracking weekly intrusions into the npm registry that follow a repeatable adversarial playbook used by North Korean state-sponsored actors.