
Show HN: Make a business model canvas in your browser - sbussard
https://sbussard.github.io/canvas-sketch/
======
davidjgraph
The github project itself is at [https://github.com/sbussard/canvas-
sketch](https://github.com/sbussard/canvas-sketch)

Question: how do you save/load?

We had a similar idea for draw.io [1]

[1]
[https://www.draw.io/?splash=0&url=https://raw.githubusercont...](https://www.draw.io/?splash=0&url=https://raw.githubusercontent.com/jgraph/drawio-
diagrams/master/templates/business/business_model_canvas_1.xml)

~~~
realPubkey
The whole state json-stringified and then stored as base64 in the
localstorage. Looks like a valid solution for that amount of data.

~~~
TeMPOraL
I think the question should be restated as: how do you save _to a file_ and
load _from a file_? The use of localStorage means you can only have one
version of a canvas per browser/device pair.

~~~
numbsafari
Create a gist and support loading from a gist URL?

It's shareable between devices and people, and even editable if you pretty-
print the JSON, rather than base64 encoding it.

I would probably support both options.

[https://developer.github.com/v3/gists/#create-a-
gist](https://developer.github.com/v3/gists/#create-a-gist)

~~~
sleepychu
put my contact info in a public gist and say goodbye to me as a business
partner.

~~~
numbsafari
Yeah, good point.

You can make the gist non-public by default (set public=false), and perhaps
gists are the wrong tool, but something akin to gists seem like a good way to
do something like this. I know Dave Winer was using the DropBox API in this
way for some of his outlining tools.

But your point is well made, one of the downsides of the "web" as a platform
is that it's hard to know what happens with the data you save to a random web
application. I've had experience with product managers loading entire customer
lists of emails into random "email validation tool"s, which were clearly just
honeypots for foolish people's data.

------
briodf
That's a nice technical implementation of the Business Model Canvas. However,
you should check the licensing under which it has been published as the result
of accademic research:
[https://strategyzer.uservoice.com/knowledgebase/articles/506...](https://strategyzer.uservoice.com/knowledgebase/articles/506842-business-
model-canvas-and-value-proposition-canvas)

>The Business Model Canvas, released under Creative Commons license, is open
for building other approaches and variations on the concept. There have been a
number of variations discussed and demonstrated here in the Hub and
externally. Where variations have been made, recognition of the original
source material must be included in the variation. The text and link
Strategyzer.com should be clearly visible and legible under every canvas.

If you're interested in the topic, you should definitely check out
[https://strategyzer.com/](https://strategyzer.com/) which is the company co-
founded by the former PHD that developped the concept of the Business Model
Canvas.

~~~
dosy
Can a concept really be restricted? I thought ideas were not patentable.

~~~
alnorth
Who mentioned patents?

~~~
onli
In the current US patent climate disaster it is not really a big leap to see
something that is clearly not protected by copyright and then think "maybe
they got a patent for it and throw licenses around because of that."

------
peterlk
Shameless plug: we built business model canvas building [1] into Aha! In
addition to being able to create them, you can save them and put various
versions into presentable notebooks [2] to see how they change over time or
just to compare them. Also, it's configurable, so you can create a lean canvas
or SWOT diagram or others [3]

[1] [https://support.aha.io/hc/en-us/articles/205738519-Create-
an...](https://support.aha.io/hc/en-us/articles/205738519-Create-an-Aha-
business-model-canvas-strategic-model)

[2] [https://support.aha.io/hc/en-
us/articles/360006871731-Custom...](https://support.aha.io/hc/en-
us/articles/360006871731-Customize-notebook-slides)

[3] [https://support.aha.io/hc/en-
us/articles/360000716906-Create...](https://support.aha.io/hc/en-
us/articles/360000716906-Create-your-own-strategic-models)

------
sbjs
This should be made into an Electron app with load/save, and then sell
licenses to it for $50 USD. ;)

~~~
nojvek
I’m really bummed Chrome discontinued Chrome apps.

Basically what I really want is to be able to make electron like desktop apps
but not ship and load an entire browser with it.

Chrome apps were light weight and you could do a lot of desktop like things
with it.

Progressive web apps are nice but there’s a ton of things lacking.

~~~
kevin_thibedeau
There is still Qt WebEngine as a "lite" Electron. Or if that is too
objectionable you can use the WebView interface with a users browser and let
the app run as a background process.

~~~
sbjs
Electron (while inside Atom) started out its life as a WebView from
WebKit.framework, but they realized there are too many downsides to that. So
they forked Chromium to add it to a Node process and wired it into Node's
libuv, which is all Electron really is. So yes it's heavier weight, but now
you have Developer Tools built in.

~~~
nojvek
What would be really awesome is if Electron somehow managed to use shared
resources if the Chrome was already open and not be a giant memory hog.

That's the biggest downside to Electron I see. You can create some fast
performant UIs in it, but just a blank view is a big memory hit.

------
yoavm
Very nice and useful! I guess that's not your main concern, but when I tried
to type some Hebrew characters the whole board disappeared (try שלום).

~~~
sbussard
Fix merged [https://github.com/sbussard/canvas-
sketch/pull/16](https://github.com/sbussard/canvas-sketch/pull/16)

[https://sbussard.github.io/canvas-sketch/](https://sbussard.github.io/canvas-
sketch/)

------
OldSchoolJohnny
FYI to other business software developers: this does not refer to a "canvas"
object in HTML 5 sense nor tying that to a business domain model object as we
might expect, it's a Business tool for apparently brainstorming business ideas
for people that don't already have a clear business idea.

------
Aaargh20318
You can find a BMC and a bunch of similar tools for free on
[https://www.businessmakeover.eu](https://www.businessmakeover.eu)

------
kristiandupont
I'd love to hear about peoples experience with this.

I have the book and I tried setting up a canvas a few times but I didn't find
it very helpful. It might be because of nature of the projects that I tried it
on, I am not sure. Can anyone tell me about a time where they got explicit
value/insight from setting one up?

~~~
ArtWomb
It's part of the Lean Startup methodology. And the very first step in getting
to MVP. Where I believe it is helpful is getting feedback. You have something
concrete to show people. And hopefully their feedback will help you to
crystallize your design.

~~~
peterlk
To be clear, though, there is a difference between the business model canvas
[1] and the lean canvas [2]

[1] [http://creatorconsulting.com/wp-
content/uploads/2014/05/Busi...](http://creatorconsulting.com/wp-
content/uploads/2014/05/Business_Model_Canvas.png)

[2] [http://3daystartup.org/wp-content/uploads/2014/02/Lean-
Canva...](http://3daystartup.org/wp-content/uploads/2014/02/Lean-Canvas-
Official--1024x791.png)

------
b45
Cool! Fyi, when adding an item with 30+ characters, the item spills over to
the next grid. Since you are already using css grid there are some css grid
properties that handles minimizing/ wrapping values within a parent grid.
Cheers!

~~~
sbussard
Thanks for the feedback! I'll create an issue for that

------
chm0022
Awesome! I think this tool is great. I would recommend adding to your future
MVP is an info highlight to each block of the canvas, so the user doesn't have
to research the type of questions he/she needs to fill the canvas.

~~~
sbussard
Thanks! I'll add it to the backlog!

------
addedlovely
Nice use of CSS grid! Noticed special characters seem to break the site. e.g.
…

------
desireco42
Hey really cool. I like what and how you did it, it is appropriate level of
storing data.

Few years ago I made a html version, so people can create number of canvases.
Gitignore ignores anything starting with model- and you have business and lean
canvas examples.

[https://github.com/desireco/BusinessModelCanvasTemplate](https://github.com/desireco/BusinessModelCanvasTemplate)

------
al_ramich
Great, very clear and easy to use but are you meant to be able to share this.
What is the intended use case?

~~~
spr2
if you are looking for a free online version of the business model canvas and
many more templates, you can also try out our tool canvanizer.com as an
alternative. This also supports sharing and collaboration through edit or
readonly links. Does not build on local storage though.

~~~
al_ramich
bit of cross-selling never harms ;) thanks, will check it out. Already
utilising various tools but always keen to find better alternatives.

------
chrisMyzel
There's a whole open source toolkit for managing and sharing BMC avail on
[http://toolkit.builders/](http://toolkit.builders/) which would profit a lot
from your sneaky interface.

------
macspoofing
It looks OK. It's light on features and the UX isn't that great (why input
popups at the top of the page?). Why not spend a bit more time on it before
showing it off to a big audience?

~~~
sbussard
I had absolutely no idea it was even going to be noticed. I posted an older
version several years ago and no one paid attention.

------
kowdermeister
The design is really nice. I'd add these things though:

\- rearrange cards inside segments

\- add a tooltip to the icon to each segment to briefly explain what's
expected there or what are good examples

\- change color of cards

~~~
sbussard
these are good additions! Issue created!

------
jaredandrews
Very cool seeing this here! Hope things are good out in Nashville!

~~~
sbussard
Thanks Jared! Let me know the next time you're in town!

------
filleokus
Could OP maybe post an example of a board to play around with?

~~~
sbussard
Added to backlog. Thanks!

------
NKCSS
I have no idea what to do here, maybe pre-populate it when first time visiting
to show the concept, add a button (with confirm) to start over?

~~~
sbussard
Yeah I put an issue in the backlog to help
[https://github.com/sbussard/canvas-
sketch/issues/9](https://github.com/sbussard/canvas-sketch/issues/9)

There's a whole book dedicated to the topic if you're interested. It's a quick
read. [https://strategyzer.com/books/business-model-
generation](https://strategyzer.com/books/business-model-generation)

------
matejlatin
That's really cool, but when I want to print it, it doesn't keep the business
model canvas layout :/

~~~
sbussard
Thanks for the feedback! I'll add it to the backlog

------
dugluak
Where's the data stored?

~~~
wmblaettler
In your browser's LocalStorage as a base64 encoded JSON string

------
kkotak
I don't get it. Is this anything more than post it notes on a grid?

~~~
sbussard
It's from this book [https://strategyzer.com/books/business-model-
generation](https://strategyzer.com/books/business-model-generation)

------
webbdev
Very cool!

