Sygnal Site Engine ( SSE )

Structure, reuse, improve and protect your Webflow site code.

Sygnal Site Engine ( SSE ) is a framework for client-side script development in Webflow-hosted sites. It combines a range of best-practices and modern technologies to create an ideal development environment for Webflow.

We focus on using...

• A modern development IDE, e.g. VS Code

• Modern languages like TypeScript and SASS

• Structured development practices... multiple classes and files to organize your code

• A source code repository to protect your code and history

• A clean, efficient deployment pipeline for your code changes

• Clean, centralized code deployment packaging for integration into your Webflow site

Zero Cost. A complete setup can be built 100% free, as all of these technologies are freely available or utilize free plans. All it requires is learning the tech, and the setup.

Core Technologies Used

SSE's architecture is highly flexible, but this is our typical configuration;

• TypeScript for structured, modern code development with type-safety. Makes code far more manageable, more reusable, better bug-proofing, and offers better testing.

• SASS for modern structured CSS development which support robust commenting

• GitHub for full source control management ( SCM ), ensures your code is safe, and that you have a full history of changes.

• Jest for full unit-testing support

• VSCode as a full modern IDE for development

• Netlify for the production code-delivery CDN.

• Sygnal DevProxy for full DEV/TEST and PROD environments. Allows your developers, team, and clients to fully test new features before they are public.

Key Benefits

This setup gives us a ton of benefits;

• Easy code management in your Webflow site. There is no code editing anywhere, on any pages through the Webflow designer. Everything is done directly in VS code.

• Monorepo for code safety- there is no risk of breaking your site or deleting important pieces, everything is safe in GitHub and you can revert any time.

• Solid versioning, tracking, and production deployment controls.

• Realtime development. Change, save, refresh, you're looking at live code against your current Webflow staged site.

• Persistent testing. Check in code anytime, and your client and testing team can review the latest changes immediately on e.g. test.mysite.com or whatever URL or subdomain you choose.

• Easy access to add-on libraries, like Luxon for dates, cookie.js for cookie management, or GSAP for animation.

• CI/CD setup for easy, live deployment support. There is no need to change code or URLs in Webflow, you can deploy your code updates to your production site through a simple GitHub pull request.

We're continually adding new features as well, because our team utilizes this setup in all of our client sites.

Video Tour

Here's a quick video overview of how SSE benefits our team and projects.