This is so badass! I love using pen & paper for mockups.

FYI, I just shared your project on Product Hunt: https://www.producthunt.com/posts/printable-mockups

I think the design community there will find it really useful!

This is very well executed.

One suggestion: maybe add an empty block for a placeholder to make space for notes.

Thanks! The Notes block is the next thing I’ll add to it

Is there such add-on for Inkscape?[0]

On GitHub found only few Inkscape add-ons for creating interactive mockups.[1,2,3]

[0] https://inkscape.org

[1] https://github.com/jonathanmann/inkscape_app_mockup

[2] https://github.com/garrett/magicmockup

[3] https://github.com/ajashton/Inkscape-Mockup-Toolkit

One of those simple yet brilliant things I wonder why it hadn't been invented yet.

Aren't those ideas the ones that are always the most successful businessess too?

If one can continue to crank out those simple genius ideas, yes. And if one has the rest of the skills necessary to run a business.

Lovely work! Can we have arrows too please? So we can build the flow between screens into the document

Seems like if this was to become a product/service you could offer a service like https://www.uistencils.com/ but with custom layouts.

Very cool! Now I want one which is a full online version :)

yay ! direct import into marvel app :)

Also, might be due to inexperience in the field but why import/export in JSON ?

JSON is a very lightweight text serialization that can closely resemble your in-memory object structure. By Contrast XML support way more methods of serialization that are more complex and/or less clear in practice.

They could use a different file extension and even gzip the file as well. I often use line separated JSON+GZ as an interchange format for records.

So you can load previous configured pages with its settings and mockups.

Dude imagine this: Canvas on top of this with free drawing and save the results in json-gz all in frontend technology. Save trees, unleash creativity!

Could hand made mockups (a la apple pen) be stored in json and be reproduced flawlessly ?

This could be useful.

For all of the electronic communication in my company, once things get to a certain level of management, they want to see stuff on paper.

This is really well done. And +1 for the suggestion of placeholder spaces for notes. Great work, thank you for sharing this.

Thanks! The Notes component is on the to-do list

This is a great idea.

You could probably turn this into a product if you were to print out notebooks where pages were the templates.

This is fantastic! Very useful, especially for those of us who still think best with pen and paper.

Cool, although I noticed the output PDF is fairly blurry. Can this be made crisper?

The blurriness is a problem… With the pdf library I’m using (jsPDF) I cannot export the SVG directly so I convert it to an image and then embed the image in the pdf. To solve the problem, I can increase the converted image’s resolution but then the pdf becomes huge (~20 MB, for example). There is a ‘quality’ parameter in the code, maybe I’ll expose it in the UI and you can find an optimum value. I’ll try to find a way to export or ‘write’ the svg data directly in the pdf, I think it’s the best way to do it.

This maybe? http://pdfkit.org/docs/vector.html#svg_paths

Can you convert to eps from the SVG and then whack the eps into a PDF?

Is it common to use jQuery with React? I'm relatively new to React.

I don't think it's common to start a new project with both jQuery and React, or actively develop jQuery and React modules in the same project, but it is probably quite common for projects that initially used jQuery to gradually move modules to React.

Not recommended, but they are compatible. The important is to achieve your goal with whichever tools you currently have.

It's possible. It's not something you normally intend to do in a new project but it's possible to use jQuery and other libraries inside React and it's handy when working with legacy code.

Yes it’s common and you can use it. Of course there is also the fetch api.

If it’s a startup project just use whatever your most familiar with and change it when/ if it becomes a problem.

Love it. Working out UI issues analog like this really helps sometimes!