In Reference examples, surface the size of the canvas

[iamjessklein]

As someone new to reading through documentation, it can be challenging to understand how to conceive of the space of the canvas. It might be helpful to surface this information on hover or toggle via a small grid-like approach. Something like this:

[toolness]

I think this is a great idea--not just for beginners, but even for experienced coders who understand coordinates but just don't know how big the example canvas is.

It might possibly look a bit noisy/redundant if the page has lots of separate examples; if it does, maybe we could just display the grid for the first example?

Oh, I guess it might also be a bit useless for the examples that don't do anything with coordinates, but I'm not sure how many of those exist. But it might be worth exploring whether we can turn the functionality off for certain examples, if it's deemed not-so-useful.

[iamjessklein]

One way to get to a proof of concept here would be to prototype a few simple little interactions here. I'm happy to do that.

[lmccart]

I love this idea! If you want to prototype a few examples, that'd be wonderful. @toolness makes a good point, maybe it's worth also prototyping an example that doesn't related to the grid to see if it still feels ok or if we want a disable mechanism.

[iamjessklein]

👍 We could try a toggle or hover state to see if that would work.

[lmccart]

yeah i think the hover could be a great idea, because it keeps things looking simple and doesn't add visual complexity unless you want it. looking forward to seeing what you come up with.