- Make your content editable
- Create a custom mod
- General usage
- AngularJS 1
- Angular 2+
- Data only
- Global methods
- Anymod HTML
- Anymod CSS
- Kitchen sink
- Content anywhere
- HTML & CSS on the page
- Order of items
- Contact Form
- Carousel (Slideshow)
- About Module Monday
- October 2018
- September 2018
- August 2018
- July 2018
- June 2018
Building blocks for the modern web
Anymod is a platform for building and sharing functional, ready-to-use web modules, which we call mods.
Mods can be added to any website.
Simpler web development
Our mantra is “Simplify web development”. We believe the web makes humanity better, and we want to support the developers who power the web.
To simplify development, we’ve built:
- A library of free, open source mods you can clone and tweak
- A free, cloud-based code editor with build tools automatically configured
- A platform for delivering mods, which makes adding them as simple as copy & paste
Tools for non-developers, too
Part of making life easy for web developers is helping teams & clients do more on their own.
Mods have a built-in WYSIWYG content editor that lets non-developers update text & images directly from their live web page. No coding skills are needed to use the content editor, and a live preview gives instant feedback.
The official guide assumes basic knowledge of HTML. If you are totally new to web development, you may want to try getting a simple web page working first. Once you have a web page, you’re ready to use Anymod.
If you are an experienced developer and want to know how Anymod works with other frontend libraries & frameworks, you can jump to the following:
AngularJS 1 - Angular 2+ - React - Vue.js - Bootstrap - JSON (data only)
The easiest way to try Anymod is by example. If you want to try a mod in your own project, you can simply create an
.html file and paste the following code:
This will give you the functional carousel mod below. It’s as easy as copy & paste to get a mod working on your web page.
We have just added our very first mod!
You can also open this link to see the same example in a jsfiddle.
The Quickstart page provides a basic text example using Anymod.
At the core of Anymod is a system that enables mods to be delivered to any platform.
This code puts a simple text mod on the page:
This looks pretty similar to just rendering some basic text, but Anymod has done a lot of work under the hood. The text
Hello World! is not hard-coded. Instead it’s coming from the mod, and that means it can be edited without touching the code on the page. This is done with an easy-to-use online dashboard.
Anymod makes it incredibly easy to manage content remotely through the dashboard. Once you have a mod in place, you don’t need to touch your code to change the content. Let’s say you have a dropdown on your website:
and you want to be able to change its content easily. With Anymod, it’s as simple as editing in the dashboard. In this case, the dashboard would look something like
Try editing the content with the form, and notice how it changes the text in the dropdown above the form. This is what it’s like editing in the dashboard: updated content is automatically reflected on your site.
The dashboard makes Anymod excellent for teams that have non-technical members and for advanced developers who want to focus on other parts of the codebase. It also means you can handle edits from your phone while sitting next to a pool, which is a nice side effect.
Anymod does more than just deliver content. It actually links data from mods with the DOM, meaning everything is reactive. How do we know? Just try it with this next mod.
Open up your browser’s developer console and type
Anymod('orllm').text = 'Foobar'. You should see the rendered
Change me in the console example here update accordingly.
Similarly, you can get values from a mod at any time. Try typing
Anymod('orllm').text into your developer console to see for yourself.
Speed is one of the most important factors on the web, so Anymod is focused on it. Anymod does a lot behind the scenes to keep your page moving quickly.
Regardless of how many mods you put on a page, Anymod makes just one API call to get everything it needs. That means less time spent waiting for separate stylesheets or templates to download. With Anymod, everything comes down the wire together.
Mods are cached on the server side, which means they get delivered instantly, without requiring any database lookups.
Get started creating your own mods!
Sign upOnce logged in, you can create your own mods
Or learn more about using Anymod: