# Ascii Collab: Draw ascii art together on an infinite canvas

**URL:** <https://discourse.elm-lang.org/t/ascii-collab-draw-ascii-art-together-on-an-infinite-canvas/6273>\
**Category:** Show and Tell\
**Created:** [September 12, 2020, 5:48pm UTC](https://discourse.elm-lang.org/t/ascii-collab-draw-ascii-art-together-on-an-infinite-canvas/6273 "2020-09-12T17:48:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![MartinS](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/martins/32/3137_2.png) [@MartinS](https://discourse.elm-lang.org/u/MartinS)\
**Post date:** [September 12, 2020, 5:48pm UTC](https://discourse.elm-lang.org/t/ascii-collab-draw-ascii-art-together-on-an-infinite-canvas/6273/1 "2020-09-12T17:48:15Z")

</div>

A month ago I realized I really like drawing ascii art. Originally I was using [yourworldoftext.com](http://yourworldoftext.com) but it lacks features I wanted. So I ended up making my own webapp that lets people draw ascii art together on an infinite canvas.

[https://ascii-collab.lamdera.app](https://ascii-collab.lamdera.app)

Here’s what it looks like in action!

 ![screenshot](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/a/ace29f80767a2c3611304cb4bef2df49cc0cd07e.png)

Features:

- People can edit the canvas at the same time and see each others changes
- Per-user undo history
- Copy/paste and block select text
- Hide changes made by a user
- Link positions on the canvas (like this [https://ascii-collab.lamdera.app/?x=488&y=89](https://ascii-collab.lamdera.app/?x=488&y=89))

Both the frontend and backend are written in Elm, using Lamdera. Developing this app went smoothly and I was able to finish it over a span of 6 weeks.

I will open source this eventually but for now it uses undocumented Lamdera features that aren’t ready for release yet.

 ![enjoy](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/2X/1/171683fe24efb62ba435afb051046665d92ec403.png)

Oh, also I’ll being giving a short presentation at [elm-london](https://www.meetup.com/Elm-London-Meetup/events/273210428/) on Thursday about this.

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [September 12, 2020, 7:22pm UTC](https://discourse.elm-lang.org/t/ascii-collab-draw-ascii-art-together-on-an-infinite-canvas/6273/2 "2020-09-12T19:22:23Z")

</div>

That is very nice - especially the front and back end in Elm aspect.

I am curious, what data structure did you use for the ‘infinite’ 2d grid of ascii characters?

---

<div class="post-metadata">

**Author:** ![MartinS](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/martins/32/3137_2.png) [@MartinS](https://discourse.elm-lang.org/u/MartinS)\
**Post date:** [September 12, 2020, 7:31pm UTC](https://discourse.elm-lang.org/t/ascii-collab-draw-ascii-art-together-on-an-infinite-canvas/6273/3 "2020-09-12T19:31:48Z")

</div>

It looks like this `Dict ( Int, Int ) Cell` where each cell is a 16x16 block of ascii characters (along with some extra data like who wrote what and in what order).

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [September 22, 2020, 7:31pm UTC](https://discourse.elm-lang.org/t/ascii-collab-draw-ascii-art-together-on-an-infinite-canvas/6273/4 "2020-09-22T19:31:53Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.