{
  // Existing:
  "size": {
    "w": 9,
    "h": 6
  },
  "template_scope": undefined,
  "flags": {
    "disable_default_templates": false
  },
  "initial_html": "<html>... HTML GENERATED BY A DESIGNERTOOL INSTANCE ... </html>",
  // There can be selected between these two options: 'download' or 'save'
  "htmlButtonBehaviour": 'save',
  // This function is called when the user clicks on the Html button: 'download' or 'save'. (This is only an example, you can replace it with your own function)
  "onHtmlButtonClick": (html: any) => {
    console.log(html);
  },
  "isTopRightExitButtonVisible": false,
  "isBottomLeftExitButtonVisible": false,
  "onExitButtonClick": () => {
    emit('exit');
  },
  // The logo needs to be on a publicly accessible URL, in image format PNG, JPG, SVG etc.
  "logo_sidebar_url": "https://yourdomain.com/path-to-your-logo.png",
  "zoom": 100,
  "backgroundColor": "#ffffff",
  "backgroundImage": null,
  "border": {
    "enabled": false,
    "width": 6,
    "color": "rgba(0, 0, 0, 0)"
  },
  "canvasOffset": {
    "x": 0,
    "y": 0
  },
  "address_box": {
    "visible": true,
    "width": 3.6,
    "height": 2.2
  },
  "merge_variables": [
    "company",
    "firstname",
    "lastname",
    "address1",
    "address2",
    "city",
    "state",
    "zipcode"
  ],
  "return_address": {
    "company": "Test",
    "firstname": "Jeff",
    "lastname": "Doe",
    "address1": "425 Main St",
    "address2": "Apt 1",
    "city": "Miami",
    "state": "FL",
    "zipcode": "34689"
  },
  "example_data": [
    {
      "company": "Acme",
      "firstname": "John",
      "lastname": "Doe",
      "address1": "123 Main St",
      "address2": "Apt 1",
      "city": "Los Angeles",
      "state": "CA",
      "zipcode": "12345"
    },
    {
      "company": "Acme",
      "firstname": "Jane",
      "lastname": "Doe",
      "address1": "23 Any street",
      "address2": "Apt 45",
      "city": "Anytown",
      "state": "CA",
      "zipcode": "23452"
    }
  ],
  "api": {
    "base_url": "https://dev-designer.directmailmanager.com/api",
    "project_id": 1,
    "user_id": 2
  },
  "user_id": "{INTERNAL_USER_ID}",
  "google": {
    "map_api_key": "{YOUR_GOOGLE_MAPS_API_KEY}",
    "use_predefined_locations": false,
    "to_addresses": ["1 Main St Apt 1, Los Angeles, CA 12345"]
  },
  "fonts": [
    {
      "name": "Arial Black",
      "link": "https://fonts.googleapis.com/css?family=Arial+Black"
    },
    {
      "name": "Courier New",
      "link": "https://fonts.googleapis.com/css?family=Courier+New"
    }
  ]
}

Use the component in your application:

<script setup lang="ts">
import { register } from 'designertool'
register()

</script>

<template>
  <PostcardDesigner />
</template>

Available functions to modify the default config:

Every option can be modified by calling the init() function except the fonts, which can be extended by calling the addFont() function:

import { init, addFont } from '@webgurus-eu/postcard-designer-tool';

init({
  backgroundColor: '#000000',
  return_address: {
    company: '',
    firstname: 'Chuck',
    lastname: 'Norris',
    address1: '420 Forrest St',
    address2: '',
    city: 'Austin',
    state: 'TX',
    zipcode: '34444',
  },
});

addFont([
  {
    name: 'Kablammo',
    link: 'https://fonts.googleapis.com/css?family=Kablammo',
  },
  {
    name: 'Bebas Neue',
    link: 'https://fonts.googleapis.com/css?family=Bebas+Neue',
  },
]);

Built With

TypeScript
Vue 3
Vite
Tailwind

Future Updates

Conversion Tracking

FAQs

What is designertool?

Is designertool well maintained?

Package last updated on 17 Feb 2026

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install