> For the complete documentation index, see [llms.txt](https://docs.lamsfoundation.org/lams/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.lamsfoundation.org/lams/tools/online-editor.md).
# Online Editor
LAMS includes a **powerful and versatile online editor** that facilitates the creation of educational content through a **familiar word-processor-style interface**. Available throughout **all LAMS activities**, the editor allows you to create rich, interactive learning materials without requiring technical knowledge of HTML or web development.
You can easily combine **formatted text, images, videos, tables, links, embedded media, and interactive content** to design engaging and visually appealing learning experiences that support active learning and student engagement.
The editor also includes a collection of **ready-made templates for text, images, videos, and embedded content**, helping you quickly create modern-looking and educationally enriched learning activities. The HTML code generated by these templates follows **responsive web design principles**, meaning that content automatically adapts to different screen sizes and devices, including desktops, tablets, and mobile phones. This ensures that learning activities remain accessible, readable, and easy to interact with regardless of how students access the lesson.
In addition, the editor supports **mathematical and scientific formulae using LaTeX, a high-quality document markup and typesetting system** widely used in academia, mathematics, engineering, and computer science. This allows you to create professional-looking equations, scientific notation, and technical educational content suitable for a wide range of higher education disciplines.
### Ready-made Templates
#### Text Templates
| Text Template Type | What it is for |
| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Paragraph, full width** | Adds a simple full-width text block for explanations, instructions, reading content, or activity guidance. |
| **Paragraph and heading** | Adds a heading followed by paragraph text, useful for structuring content into clear sections. |
| Two columns | Splits content into two side-by-side sections, useful for comparisons, pros and cons, or paired concepts. |
| Three columns | Presents content in three sections, useful for frameworks, categories, stages, or grouped ideas. |
| Statement | Highlights an important message, key idea, learning point, or instruction so it stands out. |
| Notes | Adds a visually distinct note area for reminders, tips, warnings, or supporting information. |
| Labels | Provides short labelled text blocks, useful for keywords, categories, learning outcomes, or tags. |
| Quote, centre picture, paragraph above | Combines text, an image, and a quote-style layout, useful for case studies, expert perspectives, or reflective prompts. |
| Panel, heading and body | Creates a structured content box with a title and body, useful for explanations, tasks, or grouped information. |
| Panel, heading, body and footer | Adds a panel with an extra footer area, useful for summaries, references, follow-up instructions, or next steps. |
| Jumbotron with text | Creates a large, prominent text section, useful for lesson introductions, key messages, or topic overviews. |
| Header Waves | Adds a modern visual header with a wave design. You can change the colour by double-clicking it, making it useful for visually separating sections or creating attractive lesson openings. |
#### Image Templates
| Image Template Type | What it is for |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Centered image | Places an image neatly in the centre of the page or content area, useful for diagrams, illustrations, photographs, or visual examples that should receive focused attention. |
| Image full width | Displays an image across the full width of the content area, useful for banners, large diagrams, detailed visualisations, timelines, or high-impact introductory images. |
| Image and text | Combines an image with accompanying text, helping you explain, describe, or contextualise visual content alongside written information. |
| Text on image | Places text directly over an image, useful for titles, section headers, prompts, quotations, or visually engaging introductions. |
| Image within a panel | Displays an image inside a structured panel or content box, helping to visually separate important media content from the rest of the lesson. |
| Carousel | Creates an interactive image slideshow that students can navigate through, useful for step-by-step processes, image sequences, galleries, case studies, or comparing multiple visuals. |
| Two column images | Displays two images side by side, useful for comparisons, before-and-after examples, contrasting concepts, or paired visual explanations. |
| Three column images | Displays three images in a row, useful for categorisation, showing multiple examples, illustrating stages of a process, or presenting grouped visual content. |
### Multimedia Embedding Templates
| Multimedia embedding type | What it is for |
| ------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Video | Embeds a video directly into the learning activity, allowing students to watch multimedia content without leaving LAMS. This is useful for recorded lectures, demonstrations, interviews, tutorials, animations, or case-based learning scenarios. |
| Video with side text | Combines an embedded video with supporting text displayed alongside it. This layout is useful for providing instructions, reflective questions, summaries, learning objectives, or explanatory notes while students watch the video content. |
| Audio | Embeds an audio player directly into the lesson, allowing students to listen to podcasts, pronunciation examples, interviews, narrated explanations, music, language exercises, or recorded feedback within the learning activity. |
1800+ Web Resources to embed from
Just cut and paste the URL from any of these sources and LAMS will take care of the rest
### Advanced Layout Templates
{% embed url="" %}
| Screen header | Creates a large introductory header section for a learning screen or activity page. It is useful for displaying lesson titles, topic introductions, key instructions, learning outcomes, or important announcements in a visually prominent and engaging way. |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Tabs | Organises content into multiple tabbed sections that students can switch between without leaving the page. This is useful for breaking complex information into manageable sections, such as different topics, stages, case materials, resources, or step-by-step instructions, helping reduce visual clutter and improve navigation. |
## Bring your own HTML
Some times you might want to embed of use your own HTML into your activities. For this, use the Source button and add or modify the code accordingly.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.lamsfoundation.org/lams/tools/online-editor.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.