2 Query Parameters
Query parameters allow you to initialize the application with your own settings. You can change how the app looks, which tools are available, what are the default values, change the image parameters and much more.
Using query parameters is very easy. You will just add the options for the url using question mark (?) and following the parameters and values you want to use separated with equal sign (=). You can combine different parameters, separating them with ampersand symbol (&).
If you want to open the default tool with HD sized (1920x1080 pixels) image with a transparent background, use width height and bg parameters.
Example: https://custom.sumo.app/?width=1920&height=1080&bg=00000000
Example: https://tatami.sumo.app/?width=1920&height=1080&bg=00000000
The easiest way to get started is to create your own Sumo app and use our wysiwyg (what you see is what you get) editor to pick the parameters. You can create as many Sumo apps you want and you will get an unique id for all the apps.
Then, just use your app id to load all the query parameters and other settings directly from the cloud.
Example: https://custom.sumo.app/?app=kuusamo
Example: https://tatami.sumo.app/?app=kuusamo
Default drawing assists to be on at start separated with semicolon (;).
Possible values: spinner, gravity, symmetry, perspective and livestroke.
Example: https://custom.sumo.app/?assist=spinner;gravity
Example: https://tatami.sumo.app/?assist=spinner;gravity
Application takes a backup after 3 seconds when there are no actions from the user.
Backup defaults to true, so you can disable it by setting it to false.
Example: https://custom.sumo.app/?mode=dev&backup=false
Example: https://tatami.sumo.app/?mode=dev&backup=false
Use beta=true for accessing all the latest features that are available for testing.
Don’t use beta=true for production, we might test new features that are not tested properly.
Contact us for new feature ideas.
Example: https://custom.sumo.app/?mode=dev&beta=true
Example: https://tatami.sumo.app/?mode=dev&beta=true
Background color of the image. Hex value without hash (#).
Supports 8-digit RRGGBBAA values with alpha transparency.
Example: https://custom.sumo.app/?mode=dev&bg=FF3333AA
Example: https://tatami.sumo.app/?mode=dev&bg=FF3333AA
Blending mode for the active layer at start. Default value “normal”.
Possible values: normal, screen, add, overlay, darken, lighten, difference, negate, multiply, exclude, hardlight, softlight, pinlight and layermask.
Example: https://custom.sumo.app/?mode=dev&blend=multiply
Example: https://tatami.sumo.app/?mode=dev&blend=multiply
Default (starting) brush id. Default value is 1001 (pencil).
Possible values: 1001, 1002, 1003, 1004, 1005, 1006, 1007, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 3001, 3002, 3003, 3004, 3005, 3006, 3007, 3008, 3009, 3010, 3011, 3012, 3013, 3014, 3015, 4001, 4002, 4003, 4004, 4005, 4006, 4007 and 4008.
Example: https://custom.sumo.app/?mode=dev&brush=1007
Example: https://tatami.sumo.app/?mode=dev&brush=1007
Brush size at start. Default value is 15. Minimum size is 1 and maximum is 512. New Tatami minimum 1, maximum 100.
Example: https://custom.sumo.app/?mode=dev&brushsize=100
Example: https://tatami.sumo.app/?mode=dev&brushsize=50
Landing page buttons if the welcome screen is in use (see welcome parameter).
Default value is “Start Painting;Open Image:image;Try Coloring:color”.
The maximum amount for landing page buttons is 3 and the buttons should be separated with a semicolon (;). Not defined buttons will be hidden.
If you want to add a special action, you can do that by separating the button name and action with colon (:). Possible values for the action are link (starting with http or https), image (imports image to layer), color (opens coloring landing) or any supported app command (see commands sections from this document).
Example: https://custom.sumo.app/?welcome=true&buttons=Custom%20Button
Example: https://tatami.sumo.app/?welcome=true&buttons=Custom%20Button
CDN url where to load assets and styles. Defaulting empty string.
Example: https://custom.sumo.app/?mode=dev&cdn=https://cdn.sumo.app/
Example: https://tatami.sumo.app/?mode=dev&cdn=https://cdn.sumo.app/
Possibility to disable cloud features for Sumo. It will hide cloud saving and will not open the user login panel at start if the user is not logged in.
Example: https://custom.sumo.app/?mode=dev&cloud=false
Example: https://tatami.sumo.app/?mode=dev&cloud=false
Brush color at start. Hex value without hash (#). 6-digit RGB hex: “RRGGBB”.
Example: https://custom.sumo.app/?mode=dev&color=FF3333
Example: https://tatami.sumo.app/?mode=dev&color=FF3333
Commands separated with semicolon (;) that will be executed after initialisation. You can chain up to 100 commands. See commands section for more details.
Example: https://custom.sumo.app/?mode=dev&commands=ai-instruct
Example: https://tatami.sumo.app/?mode=dev&commands=ai-instruct
Html content for the welcome page. Will be added after the hero screen.
Can be also a link (starting with http or https) where the content is loaded from.
Example: https://custom.sumo.app/?welcome=true&content=Hello World
Example: https://tatami.sumo.app/?welcome=true&content=Hello World
Landing page description for the welcome page (see welcome parameter).
Example: https://custom.sumo.app/?welcome=true&desc=Custom Description
Example: https://tatami.sumo.app/?welcome=true&desc=Custom Description
Enable developer console log messages. Defaults to false.
Example: https://custom.sumo.app/?dev=true
Example: https://tatami.sumo.app/?dev=true
Show dock (tool quick options in bottom). Defaults to true.
Example: https://custom.sumo.app/?mode=dev&dock=false
Example: https://tatami.sumo.app/?mode=dev&dock=false
Automatic exif rotation for images. Defaults to true.
Example: https://custom.sumo.app/?mode=dev&exif=false
Example: https://tatami.sumo.app/?mode=dev&exif=false
Enable exit alert when the user closes the app without saving. Defaults to false.
Example: https://custom.sumo.app/?mode=dev&exit=true
Example: https://tatami.sumo.app/?mode=dev&exit=true
Enable sharing with native API.
Example: https://custom.sumo.app/?expo=true
Example: https://tatami.sumo.app/?expo=true
Change the height of the default image.
Example: https://custom.sumo.app/?mode=dev&height=200
Example: https://tatami.sumo.app/?mode=dev&height=200
Change the icon for the app.
Example: https://custom.sumo.app/?icon=https://inni.com/images/icon.png
Example: https://tatami.sumo.app/?icon=https://inni.com/images/icon.png
Default language. Defaults to “en”. Possible values are: ar, bn, cs, da, de, el, en, gb, es, et, fa, fi, fr, hi, hu, id, it, ja, ko, ms, nl, no, pl, pt, ru, sl, sr, sv, sw, th, tl, tr, vi and zh.
Example: https://custom.sumo.app/?lang=fi
Example: https://tatami.sumo.app/?lang=fi
Active layer index on start. Bottom layer will be indexed as 0. Defaulting 1.
Example: https://custom.sumo.app/?mode=dev&panel=layers&layer=0
Example: https://tatami.sumo.app/?mode=dev&panel=layers&layer=0
Layer names separated with semicolons (;) starting from the bottom layer.
You can specify the opacity, visibility, editable and mode separated with colon (:).
Example: https://custom.sumo.app/?mode=dev&layers=White:50;Custom:100:0:1
Example: https://tatami.sumo.app/?mode=dev&layers=White:50;Custom:100:0:1
Active lens at start.
Example: https://custom.sumo.app/?lens=hexallate
Example: https://tatami.sumo.app/?lens=hexallate
Link for the welcome screen text below the buttons (see text parameter).
Example: https://custom.sumo.app/?welcome=true&link=https://sumo.app
Example: https://tatami.sumo.app/?welcome=true&link=https://sumo.app
Mask image for the image (transparent PNG). Will create a top mask layer. Exported image can be controlled with the maskmode parameter.
Example: https://custom.sumo.app/?size=600&mask=https://inni.com/images/mask.png
Example: https://tatami.sumo.app/?size=600&mask=https://inni.com/images/mask.png
Image export mode when saving to target parameter. See image below.
Example: https://custom.sumo.app/?mask=https://inni.com/images/mask.png&maskmode=2
Example: https://tatami.sumo.app/?mask=https://inni.com/images/mask.png&maskmode=2
Sending a message to paint.
Example: https://custom.sumo.app/?message=Test%20Message
Example: https://tatami.sumo.app/?message=Test%20Message
Show post messages. Defaults to false
Example: https://custom.sumo.app/?messages=true
Example: https://tatami.sumo.app/?messages=true
Method for sending the image data when saving to target. Defaults to “post”.
Example: https://custom.sumo.app/?target=https://3d.fi/test.php&method=form
Example: https://tatami.sumo.app/?target=https://3d.fi/test.php&method=form
Do we show the start modal for paint at start. Default value is true.
Example: https://tatami.sumo.app/?modal=false
Application mode affects the UI and some functionalities inside the app.
Possible values are: paint (default), classic, photo, custom and dev.
Example: https://custom.sumo.app/?mode=custom
Example: https://tatami.sumo.app/?mode=custom
Image default name. Input field on middle top. Defaulting “Untitled”.
Example: https://custom.sumo.app/?mode=dev&name=Custom Image
Example: https://tatami.sumo.app/?mode=dev&name=Custom Image
Url for the zip package for the default 3D object. If the slug is provided, it will automatically add the full path for the 3D object zip file.
Example: https://custom.sumo.app/?obj=ball
Example: https://tatami.sumo.app/?obj=ball
3D object browser (Hamburger -> File -> Open 3D Object) elements separated with semicolons (;). Supports predefined 2D elements (images) with type “image”. 3D objects and images can be mixed.
Example: https://custom.sumo.app/?mode=dev&objects=ball;formula;cup
Example: https://tatami.sumo.app/?mode=dev&objects=ball;formula;cup
Optional parameter to pass through to API saving with target parameter.
Example: https://custom.sumo.app/?mode=dev&opt=data-for-api-save
Example: https://tatami.sumo.app/?mode=dev&opt=data-for-api-save
Panel to be opened at start. Defaulting “user” if not logged in. Otherwise none. Possible values: layers, add, user
Example: https://custom.sumo.app/?mode=dev&panel=layers
Example: https://tatami.sumo.app/?mode=dev&panel=layers
timeout pause in milliseconds at start.
Example: https://custom.sumo.app/?pause=300
Example: https://tatami.sumo.app/?pause=300
Default prompt for the AI tool.
Example: https://custom.sumo.app/?mode=dev&prompt=random art
Example: https://tatami.sumo.app/?mode=dev&prompt=random art
Reset canvas with 3d model change. Defaults to true.
Example: https://custom.sumo.app/?reset=false
Example: https://tatami.sumo.app/?reset=false
Restore the latest backup on start. Defaulting true.
Example: https://custom.sumo.app/?restore=false
Example: https://tatami.sumo.app/?restore=false
Robot is an extra layer of automation for several different functionalities.
It will assume what the user might want to do next and perform those functions automatically. Robot is defaulting to false (so it’s not in use if it’s not defined).
Example: https://custom.sumo.app/?mode=dev&robot=true
Example: https://tatami.sumo.app/?mode=dev&robot=true
Run app at start. Defaults to true. If set to false, app needs to be started with command (app-run).
Example: https://custom.sumo.app/?run=false
Example: https://tatami.sumo.app/?run=false
Enable scripting. Defaults to false.
Example: https://custom.sumo.app/?script=true
Example: https://tatami.sumo.app/?script=true
Buttons and shortcuts separated with semicolons (;) and colons (:).
Example: https://custom.sumo.app/?shortcuts=new:modal-new;download:file-download
Example: https://tatami.sumo.app/?shortcuts=new:modal-new;download:file-download
Change the width and the height of the default image.
Example: https://custom.sumo.app/?mode=dev&size=2048
Example: https://tatami.sumo.app/?mode=dev&size=2048
Snapshot version of the work (coming soon). See work for more details.
Example: https://custom.sumo.app/?work=sumo-cup&snapshot=0
Example: https://tatami.sumo.app/?work=sumo-cup&snapshot=0
Custom styles for app elements.
Example: https://custom.sumo.app/?style=menu:background:red;document-name-input:display:none
Example: https://tatami.sumo.app/?style=menu:background:red;document-name-input:display:none
Target url where the API save will send the saved image. This is a required field for activating the API save. The Share button will turn into a “Save” button and it will trigger the API save when pressed. Possible values: [absolute url] or “parent”.
When an iframe is used, you can use “parent” for saving to the parent document.
{
'image': base64Image, // image in PNG format
'preview': base64Preview, // preview in PNG format
'name': 'documentName', // document title
'color': 'brushColor', // brush color 6-digit hex
'bgcolor': 'bgColor', // background color 8-digit hex
'opt': 'optionalData', // optional data passed to the app
'layers': layerData, // layer data (name, opacity etc.)
'width': documentWidth, // document width in pixels
'height': documentHeight, // document height in pixels
'mask': 'documentMask', // document mask url
'maskmode': 'maskMode', // mask mode (0, 1 or 2)
'obj': 'objectSlug' // object slug
}Example: https://custom.sumo.app/?mode=dev&target=parent&opt=data
Example: https://tatami.sumo.app/?mode=dev&target=parent&opt=data
Link text for the welcome screen. See link for more information.
Example: https://custom.sumo.app/?welcome=true&text=Visit Sumo
Example: https://tatami.sumo.app/?welcome=true&text=Visit Sumo
Custom theme and skin for the app. Defaulting “sumo”.
Example: https://custom.sumo.app/?mode=dev&theme=candy
Example: https://tatami.sumo.app/?mode=dev&theme=candy
Welcome screen title. See welcome section.
Example: https://custom.sumo.app/?welcome=true&title=Custom Title
Example: https://tatami.sumo.app/?welcome=true&title=Custom Title
Default tool when opening the app. Defaults to “brush”.
Example: https://custom.sumo.app/?mode=dev&tool=gradient
Example: https://tatami.sumo.app/?mode=dev&tool=gradient
Show trash (clear layer) button from the UI. Defaulting true.
Example: https://custom.sumo.app/?mode=dev&trash=false
Example: https://tatami.sumo.app/?mode=dev&trash=false
Unit for measurements. Defaults to pixels (px). Possible values: px, cm, inch.
Example: https://custom.sumo.app/?unit=cm
Example: https://tatami.sumo.app/?unit=cm
Load image or document from url when starting the app.
Supports JPG, GIF and PNG formats.
Example: https://custom.sumo.app/?url=https://cdn.sumo.app/images/icon.png
Example: https://tatami.sumo.app/?url=https://cdn.sumo.app/images/icon.png
Welcome screen background video. See welcome section.
Supports MP4, WEBM and OGG formats.
Example: https://custom.sumo.app/?welcome=true&video=url-to-video.mp4
Example: https://tatami.sumo.app/?welcome=true&video=url-to-video.mp4
Default view, defaulting to "canvas" when 3D object is not loaded. Otherwise defaulting to "3d".
https://custom.sumo.app/?obj=ball&view=canvas
https://tatami.sumo.app/?obj=ball&view=canvas
Use the welcome screen as a landing page instead of going straight to the app. Welcome screen has many customisable values, including title, description, buttons, link and background video.
Example: https://custom.sumo.app/?welcome=true
Example: https://tatami.sumo.app/?welcome=true
Change the width of the default image.
Example: https://custom.sumo.app/?mode=dev&width=200
Example: https://tatami.sumo.app/?mode=dev&width=200
Sumo work slug to be loaded at start. Slug can be found from the url, when you browse the details of your work in https://sumo.app/. You can always open your own works, otherwise it needs to be set as remixable from the creator.
Example: https://custom.sumo.app/?work=kuusamo
Example: https://tatami.sumo.app/?work=kuusamo
Initial zoom for the image. Defaulting 0.8 (80%).