Select to view content in your preferred language

Free, browser-based visual XLSForm designer for Survey123 (open source)

344
1
2 weeks ago
mapvido
New Contributor

Hey everyone,

I'm a longtime Survey123 user and I wanted to share a personal project I've been tinkering with. As someone who spends a lot of time building XLSForms in Excel, I started wondering what a visual, drag-and-drop form builder might look like if it ran entirely in the browser with no login required.

The result is Survey123 Designer, an open-source tool that lets you visually build XLSForm surveys and export them as .xlsx files ready for Survey123 Connect. The big thing for me is that it supports the full XLSForm specification, including all the Esri extension columns (body, bind, parameters, etc.). Every column you'd normally hand-type in Excel is exposed through a visual property editor, so you get full control without memorizing column names.

It runs 100% client-side (nothing is uploaded anywhere), and it's hosted on GitHub Pages.

Try it here: https://palavido-dev.github.io/survey123-designer/

Source Code: https://github.com/palavido-dev/survey123-designer

To be clear: this is a personal passion project and very much a work in progress. It will continue to evolve as I have time to work on it. It's not a replacement for Esri's tools. Survey123 Connect and the web designer are the real deal, and this wouldn't exist without the incredible XLSForm spec that Esri has built out over the years. I built this to scratch my own itch and figured I'd share it in case others find it useful or have feedback.

One thing I haven't tackled yet is multi-language support (the label::language, hint::language translation columns). That's a whole separate can of worms, but it's on the roadmap for the future.

Here's what it does so far:

Drag-and-drop form building with 69 appearance-specific question cards across 9 categories. You drag a card (like "Spinner" or "Likert Scale") onto the canvas and it creates the right type + appearance combination automatically.

01-main-overview.png

Three-column layout: question palette, form canvas, and properties panel

51 pre-built form templates across 10 industry categories (Environmental, Water/Wastewater, Construction, Emergency Management, and more). Great for getting started quickly or seeing how different form patterns work.

05-template-library.png

Template library with category browsing, search, and complexity indicators

Visual expression builder for relevant, constraint, and calculation expressions. Instead of hand-writing XPath, you get a field picker, operator palette, and categorized function library.

03-expression-builder.png

Expression builder with field references, operators, and function library

JavaScript function editor with 85+ function templates across 17 categories (text formatting, date/age calculations, GIS/coordinates, scoring, unit conversions, and more). One-click add generates the pulldata("@javascript", ...) expression for you.

07-scripts-panel.png

Built-in function library with syntax highlighting and in-browser testing

Choice list management with inline editing, drag-and-drop reordering, and a pop-out modal editor. Plus a cascading select wizard that walks you through setting up filtered selects visually.

06-choices-panel.png

Choice list editor with shared lists and usage counts

Form validation catches issues before export: duplicate names, missing labels, orphaned choice lists, broken expression references, unmatched groups, and reserved word warnings.

08-validation.png

Validation results with inline error indicators

Report template builder (early/rough) for creating Survey123 Feature Report .docx templates. This side of things hasn't gotten nearly as much attention as the form builder and is still pretty bare-bones, but it has a field palette, rich text editor, and syntax reference as a starting point.

04-report-builder.png

Report mode: still a work in progress, but functional for basic templates

Other features: full XLSX import/export with round-trip fidelity, Survey123 Connect-style Excel output (data validation dropdowns, row shading, styled headers), CSV file support for select_from_file questions, auto-save with browser recovery, undo/redo, platform filtering (Field App vs. Web App), and ZIP export bundling media and scripts.

I'd love to hear thoughts from the community. Are there XLSForm patterns or workflows that trip you up that something like this could help with? Anything you'd want to see added? Bugs you find? All feedback is welcome.

1 Reply
SimonSchütte_ct
MVP Regular Contributor

🎉Really nice, there are many use cases that require Survey123 Connect, however it is not as easy to use as the web forms. Great to see there is now a new option.

0 Kudos