Lanewise - Project Management App HTML Template

Lanewise is a project management app UI kit in plain HTML, CSS and JavaScript. You get a board with drag and drop, a task list, a calendar and a timeline that all work on the same tasks, plus the pages around them. It runs out of the box with sample projects, and connects to your own server with one function. No framework, no libraries and no build step.

The 9 screens

• Board with drag and drop, task limits per column, and lanes by person or priority
• List with sorting, editing in the row, bulk actions, grouping and CSV export
• Calendar where you drag a task to another day
• Timeline with bars you can move and resize
• Overview with open, due and late tasks, workload and recent activity
• Team with people cards
• New project, a four-step form with workflow templates
• Settings for project, columns, labels, appearance and data
• Sign in, with create account and reset password

Good to know before you buy

• This is an interface kit (front end). It does not include a server, a database or user accounts. You connect your own
• Out of the box, data is saved in the browser of the person using it
• There is no real-time sync between people, no file attachments, no notifications and no permissions per person. Those belong to your backend
• The timeline shows start and due dates. It has no dependencies between tasks
• Touch drag and drop was tested with simulated touch input, not on every phone model
• Texts are in English. Dates follow the language you set
• Fonts load from Google Fonts. Everything else is inside the download
• Made for current versions of Chrome, Edge, Firefox and Safari (Safari 16.2 or newer)

In the download

• 9 HTML pages
• 1 CSS file with colour settings at the top
• Small, commented JavaScript files (no libraries)
• Documentation page, README, changelog and license

Features

• Drag and drop without a library: mouse, touch (press and hold) and keyboard (Alt + arrow keys). The board scrolls while you drag
• One data layer: change a task in any view and the others show it. Search and filters stay when you switch views
• Task dialog with description, checklist, comments, labels, start and due dates, and a link to each task
• Undo after deleting one task or many
• Save to your server: an onChange function gets every change. The guide shows how to load and save
• Export and import all data as a JSON file, and export the list as CSV
• Light and dark themes, five accent colours and a compact density
• Keyboard friendly: shortcuts, visible focus, dialogs and menus that work without a mouse, moves announced to screen readers
• Responsive from a 320 px phone to a wide desktop screen

Requirements

• A current version of Chrome, Edge, Firefox or Safari (Safari 16.2 or newer)
• A text editor
• To try it: nothing else. It works straight from the folder with sample projects
• To keep data for a team: your own server or API. The kit sends every change to one function you fill in

Instructions

1. Unzip the download and open index.html in your browser. It works from a folder, with no server or build step
2. Open assets/js/config.js for your settings
3. Change the colour settings at the top of assets/css/lanewise.css
4. To save to your server, fill in the onChange function in config.js. The data functions are in assets/js/lanewise.store.js
5. The full guide is in documentation.html