👉 Use the funkLang visual editor 👈
Visual FrontEnd Framework - Design, Develop and Deploy complex web applications using both code and visual workflows
1. About
funkLang, or funk for short, is an open-source visual frontend framework where you can build complex stateful web applications using both code and visual workflows.
With funk visual and code workflows always stay in sync so designers, low-code users and developers can work alongside each other accelerating development. funk has a strong emphasis on simplicity, collaboration, and freeform design.
funk is currently in beta so bear with us, there is a lot to build, but we are committed to making funk succeed. You can help us on this journey by:
- Signing up, trying out funk and giving us feedback
- Contributing to the funk code base
- Telling your friends about funk
- Following us on Twitter and chatting to us on Slack
- Starting us on GitHub
If you are a business user (startup, agency, enterprise) and would like to discuss our roadmap or how funk can be used to replace existing proprietary tools (Mendix, OutSystems etc..) or how funk can be used alongside React, WordPress or VueJs please book a call with us
How funk is different
funk is NOT a templated web app builder such as Wix or WebFlow. funk enables freeform design of complex HTML layouts with internal bindings of state, data and navigation. We want funk to be as fully featured as WordPress, React or VueJs, but with a simple to use visual layer that can be extended with code when required.
funk brings the benefits of visual development to frontend teams of developers, designers and low-coders who need the power of an open-source frontend framework with the benefits of rapid visual development. Our vision is a tool where everyone can collaborate together as equals using either code or visual workflows.
2. How funk works
Project status
We are working towards version 1 of funkLang. Our aim is to be able to recreate the Real World App within 6 months. We measured the below status of each part of funk against the requirements for the real-world app.
Check GH issues for details on what else we need to build to hit this milestone.
| funk | Description | Status | Docs |
|---|---|---|---|
| Canvas | Draw freeform responsive HTML | 70% complete | Canvas docs |
| API editor | Connect to external APIs | 60% complete | API docs |
| Code Editor | Transform data and feed into Canvas | 70% complete | Code editor docs |
| Design system | Setup site-wide reusable styles | 60% complete | Design system docs |
| Model | Set up the state of your site, this may include if a user is logged in | 50% complete | Model docs |
| CLI | Connect to the visual editor via a text editor | EXPERIMENTAL | CLI docs |
| Deploy | Build funk apps, deploy anywhere | 50% complete | Deploy docs |
Extending funk
You can connect the funk visual editor to your text editor using a CLI, changes are reflected between the two in real-time. This feature is presently experimental.
From your text editor you can add custom-elements to funk and eventually feed data to/from parts of funk created visually into your custom-element.
You can also write code to transform data within the funk visual environment. For instance, you could transform data from an API based on a users' location. You can import NPM packages using SkyPack directly in the editor.
Code output
When you create an app in funk everything about your application is encoded in the funk spec, which at the moment is JSON. We want this to be readable and editable by developers.
The funk spec can be pushed to git, compiled to highly optimised HTML, Js and CSS at build time and deployed anywhere.
We don't output code for different frontend framework as it creates many problems such as low code quality, poor readability, difficult integration and breaking changes between visual and code environments. Some tools try to migrate these problems by creating CSS frameworks and their own state management engines. Building a visual layers on-top of fremaworks which are only designed for code workflows is always going to cause problems (trust us we tried). We want projects built with funk to be stable and performant - we don't believe this is possible by generating code for other frameworks.
Built With funk
Here are some example sites we've built with funk, they were all built without the use of any CSS frameworks or templates. Soon you will be able to create more complex sites like password protected sites, dashboards and marketplaces.
These are our initial examples, soon you will be able to build much more complex sites with funk
3. Why we built funk
The founders of funk (David Beesley and Jan Wirth) are both developers. We've worked for large enterprise and small startups. We built funk as we could see the benefits of low-code but were disappointed by the closed-source alternatives that are heavily templated, slow, expensive and generally treat developers like second class citizens. We saw very little innovation with existing tools and decided to build something radically different.
As we developed funk we became more convinced visual development is the way forward not just for low-code users but developers too. The productivity gains are massive as is the speed of innovation. We see visual development argumenting developers existing workflows allowing them to work faster and smarter in more diversely skilled teams.
4. Contributing
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
The best way to get started is to book an onboarding call with a core funkLang contributor Jan
- Fork the Project
- Create your Feature Branch (
git checkout -b gh-123-my-featureorgit checkout -b no-issue-refactor-something) - Commit your Changes (
git commit -m 'GH-123: Add my feature'orgit commit -m 'no-issue: Refactor something') - Push to the Branch (
git push origin no-issue-refactor-something) - Open a Pull Request
Installation and Starting the project
This project runs on node. We develop funk using node version 15.
git clone git@github.com:funk-team/funkLang.git
cd funkLang
npm install
# run development environment
npm start
# run unit tests
npm run tdd-elm
5. License
funkLang is distributed under the GNU v3 License. See LICENSE for more information. We choose this licence as it's used by some of the most successful open-source projects in the world, including WordPress.
Software licensed with any GNU license can be used and even modified everywhere, including in a corporate environment, without any restrictions. However be aware that if you (or the company) ever make changes to the funkLang and want to distribute it, it must be distributed with full source code, on the same license terms as the original software source.
We choose GNU to ensure funkLang always remains free and open. Code which funkLang outputs and extensions you build for funkLang can be licensed using any licence you wish. If you have any questions about the licence please contact us.
6. Contact
You can reach us using the following social channels:
If you ever want to chat about life, love or funk, book a video call with David or Jan anytime you want.
Acknowledgements
funk would not be possible without Evan Czaplicki the creator of Elm and Matthew Griffith the ceater of Elm-ui
We are grateful for the support of the German government who provided financing via the EXIST program and Beuth Uochschule University for hosting us during our research grant.