In case you're here and don't know Sketch, take a look at sketch package!

This readme is a carbon-copy of the Sketch Redraw section in sketch readme.

When you're using Redraw, sketch_redraw covers you. sketch_redraw exposes one entrypoint, sketch/redraw, containing everything needed to get started.

// main.gleam
import redraw
import sketch/redraw as sketch_redraw

pub fn main() {
  let root = client.create_root("root")
  client.render(root,
    redraw.strict_mode([
      // Initialise the cache. Sketch Redraw handles the details for you.
      sketch_redraw.provider([
        // Here comes your components!
      ])
    ])
  )
}

sketch_redraw exposes one module to help you build your site, similarly to redraw: sketch/redraw/dom/html. html is simply a supercharged component, accepting a sketch.Class as first argument, and applies that style to the node. Because it's a simple component, sketch/redraw/dom/html and redraw/html can be mixed in the same code without issue! Because of that property, sketch_redraw does not expose text and none function at that time.

import redraw/html as h
import sketch/css
import sketch/css/length.{px}
import sketch/redraw/html

fn main_style() {
  css.class([
    css.background("red"),
    css.font_size(px(16)),
  ])
}

fn view(model: Int) {
  html.div(main_style(), [], [
    h.div([], [
      h.text(int.to_string(model))
    ]),
  ])
}

And you're done! Enjoy your Redraw app, Sketch-enhanced!

Sketch Redraw tries to integrate nicely with React Devtools! In case you're seeing something weird, signal the bug!