🕸️ Cobble together web content in Julia
35 Stars
Updated Last
1 Year Ago
Started In
January 2022

CI codecov

🕸️ Cobweb

A Julia package for cobbling together web pages.


  • Open any "text/html"-representable object in your browser with Page(x) or Tab(x).
  • Nice syntax for writing HTML: Cobweb.h.<tag>(children...; attributes...).
    • Cobweb.h.<TAB> also autocompletes HTML5 tags.
  • Lightweight, simple, and hackable.

🚀 Quickstart

using Cobweb: h, Page

page = h.html(
        h.meta(name="viewport", content="width=device-width, initial-scale=1.0"),
        h.title("Page Title")
        h.h1("This is my page title."),
        h.p("This is a paragraph."),
        h.button("Click Me for an alert!", onclick="buttonClicked()"),
        Cobweb.Javascript("const buttonClicked = () => alert('This button was clicked!')"),

Page(page)  # Open in browser

Creating Nodes with Cobweb.h

  • Syntax is similar to HTML:
using Cobweb: h

    h.p("This is a child."),
    h.div("So is this.")
# <div class="some-class">
#   <p>This is a child.</p>
#   <div>So is this.</div>
# </div>
  • Any Union{AbstractString, Symbol, Number} children will be inserted verbatim.
  • Everything else will use the MIME"text/html" representation.
using Markdown

    "Here is markdown:",
    - This \"just work\"™s!
# <div>
#   Here is markdown:
#   <div class="markdown">
#     <ul>
#       <li>
#         <p>This &quot;just work&quot;™s&#33;</p>
#       </li>
#     </ul>
#   </div>
# </div>

Cobweb.h Syntax Summary:

  • h.<tag> creates a Cobweb.Node:
julia> h.div
# <div></div>
  • Nodes are callable!

    • Positional arguments add children:
    julia> h.div("child")
    # <div>child</div>
    • Keyword arguments add attributes:
    julia> node = h.div(; id = "myid", class="myclass")
    # <div id="myid"></div>
  • There's convenient syntax for appending classes as well:

julia> node."append classes"
# <div class="myclass append classes" id="myid"></div>
  • Bools are special-cased:
julia> h.div(hidden=true)
# <div hidden></div>

julia> h.div(hidden=false)
# <div></div>

The @h macro

This is a simple utility macro that replaces each HTML5 tag x with Cobweb.h.x for a cleaner syntax:

Cobweb.@h begin
    div."text-center text-xl"(
        h4("This generates an h4 node!"),
        p("This is a paragraph"),
        div("Here is a div.")
# <div class="text-center text-xl">
#   <h4>This generates an h4 node!</h4>
#   <p>This is a paragraph</p>
#   <div>Here is a div.</div>
# </div>

📄 Writing Javascript with Cobweb.Javascript

  • Simple wrapper around a String that gets printed verbatim with MIME"text/javascript".
  • The following create the same result when represented with MIME"text/html":
    • h.script("alert('hi')")
    • Cobweb.Javascript("alert('hi')")

📄 Writing CSS with Cobweb.CSS

You can create Cobweb.CSS from any AbstractDict:

  • selector => AbstractDict (property => value).
  • We like using EasyConfig.Config for this.
using EasyConfig
using Cobweb: h

css = Config()

css."p"."font-family" = "Arial"
css."p.upper"."text-transform"= "uppercase"
css."".color = "blue"

# p {
#     font-family: Arial;
# }
# p.upper {
#     text-transform: uppercase;
# }
# {
#     color: blue;
# }

page = h.html(
        h.p("this is uppercased and blue in an Arial font.", class="upper blue")


Parsing HTML to Cobweb.Node

using Downloads, Cobweb""))