Overplay
Changelog
What changed in each version of the widget, the Cloud service and the
Community server. Install a version with
npm install overplay@<version>.
4.14.0
- Element snapshots. When someone leaves a new comment on a Pro, Max or Enterprise project, the widget saves a small picture of the area around the element, right after the comment is saved, so commenting is not slower. The Overplay phone apps show it under the page and element name, with the comment pin drawn on it. Password fields are always blank, and the widget itself is never in the picture. Pictures are kept for 90 days, and removed with their comment.
- New project setting Element snapshots (project Settings, owners and admins). It is on by default. Turning it off stops new pictures and deletes the saved ones of that project.
- The phone app API can search comments and replies, filter by person, and list the people of a project. New comment and reply notifications on iPhone offer Reply and Resolve.
4.13.0
- Comment times. Each comment and reply shows when it was left: "12m ago" in the first hour, then the time ("14:05"), "Yesterday, 14:05", "Oct 18, 14:05", or the date for older years. Hover the time for the full date, time and time zone. Times are saved in UTC and shown in each person's own time zone, so a team in America and in China sees the same moment on their own clock and day.
- Time format setting. Settings → General → Date and time: Auto (follows your browser language), 24-Hour or 12-Hour. It is saved for you only.
- The comment text sits a little closer to the author's name in the list and in the comment card.
- Website polish. The top menu shows the page you are on in Overplay blue (Community stays blue on the Self-host page, and in the phone menu too).
- How It Works, MCP, Pricing, Community, Docs, Support and the 404 page have a new page header that matches the landing page: centered title, the same dot grid and soft blue glow, and large buttons.
- Pricing: the Monthly/Yearly switch moved down, right above the plan cards.
- On short pages the footer stays at the bottom of the window instead of in the middle.
- Short windows (a laptop or a browser that is not maximized) get less empty space above the first heading, so more of the page shows.
- Ready for the Overplay phone apps. Overplay Cloud can now serve the coming iPhone and Android apps: sign-in with email, Google or Apple (with two-factor), an inbox of new comments and replies, threads with reply, resolve and reopen, and unread marks. The apps are part of Pro, Max and Enterprise. Community does not include them.
- Push notifications for new comments and replies go to the phones of project members right after the comment is saved. Each person can choose, per project, every comment, only threads they wrote or answered, or none. A resolved thread notifies the people in that thread. The author of a change never gets a push for it.
- A new password now also signs out every phone.
- A reply sent twice (for example after a network retry) no longer sends its email or Slack message twice.
4.12.0
- Comment from phones and tablets. When you write a comment, the on-screen keyboard no longer pushes the card away from its place. The card stays just above the keyboard, and the page scrolls so the pin and the outline of its element stay in view next to the card. This works with the iPad and iPhone keyboard (which slides the page up) and with Android keyboards.
- The pin of a new comment now stays on its element while the page scrolls. Before, it stayed in place on the screen and pointed at the wrong part of the page.
- While you write a new comment, its element has the same outline as an open comment, so you always see what the note is about.
- On a phone, the comment card is a bottom sheet that leaves room above it for the pin. When the sheet opens, the page scrolls so the pin is not under the sheet.
- On touch screens the placing hint is one short line, "Tap where your note goes.", without the Esc key, and pins have a larger tap area.
4.11.0
- Floating button. The button shows the Overplay logo instead of the speech bubble. While you drag it, it grows a little, smoothly. When you drop it, it settles onto the page with a short bounce and one soft ripple, like an object dropped on a surface. People who turn on reduced motion in their system see no animation.
- New options:
buttonColorsets the default color of the floating button ("site"usesprimaryColor), andbuttonPulse: trueadds soft rings that pulse around the closed button, like water after a drop, so people notice it. Each person can still change the color in Settings. - Landing page: the demo button is Overplay blue with soft pulse rings.
4.10.0
- Enterprise. The pricing page has an Enterprise card after Max (custom plan, SSO sign-in, onboarding and priority support, security and self-host help). The Community card moved to its own page. Contact Us opens a short form: name, work email, company, role, team size, where to run it, what you need and website. We get an email with every request, the sender gets an email that we will reply soon, and every request is saved.
- Community page. A new page, Community, after Pricing in the top menu: what you get on your own server, how to install it in 3 steps, Community vs Cloud vs Enterprise, our offer for self-hosting teams, and how to help build Overplay.
- Projects: a new website access option, Allow any website (not secure). Any website can connect without the approval step. Use it only for tests. New projects still use Approve websites when someone signs in.
- Mobile: project tabs scroll sideways like the top tabs, and the Website access card no longer makes the page wider than the screen.
4.9.0
- Set up your profile. After sign-up (email, Google or Apple), a short step asks for a profile picture, first name, last name and, for new accounts, a team name. First and last name are required. Existing accounts see this step once at their next sign-in; accounts that already have a team skip the team name. Google sign-up fills in the name and photo from Google.
- Names, not usernames. Comments, replies, member and team lists, join requests, the Activity log, MCP and emails show the person's first and last name. Emails greet by first name.
- Cloud: sign up with only an email and password, and sign in with your email. Accounts no longer pick or see a username (old usernames still sign in). To delete your account, type DELETE. Community keeps usernames, because it has no email.
- Account: a new Name card changes your first and last name. On Community it also changes your username, with a live check and free names to pick when one is taken.
- Profile pictures: Choose opens a menu with Upload Image and Choose Avatar. Choose Avatar offers 25 fun animal avatars (panda, fox, dino, unicorn, axolotl and more) in the Overplay style.
- Mobile: every field on the site, dashboard, sign-in, pop-ups and the widget is at least 44 px tall with 16 px text, so iPhone no longer zooms in when you tap a field.
4.8.0
- Pricing: Max is now $40 a month or $400 a year (was $30 and $300), tax included. Pro stays $15 a month or $150 a year.
- Free: 50 comments and replies a month (was 10). Still 1 project and 2 members.
4.7.2
- Emails: a new design that follows light and dark mode in Apple Mail, iOS Mail, Outlook and other mail apps. The Overplay logo is drawn in the email itself, so it shows even when the mail app blocks images. Buttons keep their blue color in dark mode, notes sit under a divider, the inbox preview shows only the summary line, and button labels use Title Case.
4.7.1
- Account: saving or removing your profile picture no longer leaves an empty page until you reload.
- Teams: the projects list on a team page shows each project's logo.
4.7.0
- Profile pictures and project logos. Upload a picture in Account and a logo in a project's Settings. A crop window lets you move and zoom the image, and the browser saves it as a small 240x240 file (WebP when the browser supports it, at most 100 KB). PNG, JPEG, WebP and GIF files open; SVG does not. Pictures show in the dashboard (sidebar, members, projects, project header) and in the widget (sidebar, comments, replies and the account menu). Only the owner or an admin changes a project logo.
- Cloud: a new or newly connected Google account without a picture takes the Google profile photo.
- Widget: pins can show the author's Photo (Settings → Appearance → Label). Authors without a picture show their initials. The panel header shows the Overplay logo. Settings has a shorter one-line subtitle and more space above the tabs.
- Sign In and Sign Up: the landing page's dot grid and blue glow behind the card, a short line under each title, "By continuing, you agree to the Terms and Privacy Policy." on the card, and Home, Pricing, Privacy, Terms and Support links below it (Cloud only). Password managers fill the fields correctly and suggest a strong password on Sign Up.
- Widget panel: search and filters hide behind a round Search button next to the page tabs; it turns into a close button, and closing clears the search and filters. A round Filters button next to the search opens Person (Anyone, Mine, each author), Last Activity (Today, Yesterday, Last 7 Days, Last 30 Days) and Replies (No Replies, With Replies). Filters in use show as chips with a round count and a remove button, plus Clear All. Every count is a round badge. The search field is fully round.
- Widget Settings: a new MCP tab (Cloud) with the MCP server address, a copy button, connect steps and prompts to try. The Settings tabs stay in the header while the settings scroll.
- Widget: the Resolve button turns green on hover. Send Reply is a round icon button, so the reply field is wider. The note title has no icon before it.
- Widget: in a note's conversation, the text lines up under the author name.
- Your data download includes your profile picture. The privacy policy covers pictures and logos.
4.6.0
- Cloud: Continue with Google and Continue with Apple on Sign In, Sign Up and the widget sign-in window. A new person gets a confirmed account at once. A Google or Apple account with the email of an existing confirmed account joins that account, and the owner gets a "New sign-in method" email. Two-factor still asks for the code. Each button appears only after its keys are set (see docs/SIGN_IN_PROVIDERS.md). Email and password sign-in stay.
- Account: new Sign-in methods card. Connect or remove Google and Apple, and Set Password for accounts made with Google or Apple. The last sign-in method cannot be removed.
4.5.0
- Dashboard: every drop list opens Overplay's own menu instead of the browser list. It works with the keyboard: arrows, Home, End, Enter, Escape and typing to jump.
- Cloud: add people to projects, teams and Account Admins by their account email. A username is a display name, so it no longer finds a person. A member added by email shows their email in the Members list. Community servers keep usernames. The MCP tool
add_membertakesemailon Cloud. - Integrations: each provider opens its own detail screen with all its settings, and connected providers show Manage. Provider logos are bundled locally.
- Linear: setup has two steps. Save the API key, then choose a team. The connection stays inactive and sends no issues until a team is chosen. Finish Setup or Discard an unfinished connection later.
- MCP: the MCP Server page shows your own plan apart from access shared by other project owners. Access to a paid project never unlocks MCP on your own Free projects.
4.4.0
- MCP: top tabs separate Server setup, Connections and Recent Activity. Activity keeps only seven days, shows 25 actions per page, and includes a Team column.
- Projects: Integrations and MCP Access have their own tabs. Integration cards provide guided setup, connection tests and Linear team selection by name.
- MCP access follows the project owner's plan. Invited project and team members can connect their own agents on Free. Owners and admins set a project-wide ceiling for tool permissions; personal connection grants and project roles can only narrow it. Existing connections follow policy and plan changes on every call.
4.3.3
- Publishing: Community now receives a matching GitHub version tag and release after each verified source sync. Release retries repair missing public releases and reject tags that point to a different commit.
4.3.2
- Cloud: rename the existing Worker to
overplay-serviceand useoverplay.appfor billing webhooks. Accounts, projects and comments keep the same database.
4.3.1
- Cloud:
overplay.appis now the service’s only custom domain. The oldcomments.artsvit.comaddress is retired. Existing accounts, projects and comments stay in the same database. Test installations that use the old address should switch tohttps://overplay.app; MCP clients should usehttps://overplay.app/mcp.
4.3.0
- Dashboard: manage MCP access in each project’s Settings. The MCP Server page lists enabled projects by team, with links to their settings. Project owners and admins keep the same permissions.
- Publishing: one checked release pipeline deploys Cloudflare, publishes npm, updates the Community mirror, and verifies each output before creating the GitHub release.
4.2.0
- Widget Settings has two tabs: General (panel, notifications and the shortcut) and Appearance (theme, pins and the comments button).
- Opening the sidebar with the shortcut no longer shows a focus ring on the Settings button. Focus moves to the panel; Tab still reaches every button.
- Website: new pages How It Works and MCP Server in the header. The MCP Server page lists all 20 MCP tools by permission. The New pill on the landing page opens it.
- Website: Pricing, Docs, How It Works and MCP Server share one page header (label, title, text, buttons).
- Dashboard: the usage bars on Plan & Billing use the full width. Team rows no longer push the arrow out of the card on hover, and Teams in the sidebar has a two-people icon.
4.1.0
- New default shortcut to open and close comments: Alt+C (Option+C on Mac). It works on any keyboard layout. Alt+Shift+C still works, but on Windows Alt+Shift can switch the keyboard language. Settings shows Option on Mac. Set
keyboardShortcutto keep another key. - The update notice in the sidebar footer now offers a prompt for your coding agent: Show Prompt and Copy Prompt. The prompt updates the package, reads the release notes, clears the bundler cache (Vite, Next.js, Nuxt and others) and restarts the dev server. A version bump alone often kept serving the old widget.
- The update notice no longer shows for the script tag, which loads the server's copy and updates by itself.
- Dashboard: on the Projects page each team is a panel with its name, project count and New Project button. Project tiles use the brand blue.
- Website: the MCP section shows a short chat in which a coding agent reads yesterday's comments, fixes one and replies.
- The public source moves to github.com/artemsvit/Overplay-Community: the widget and the Community server. Links on the site and in the package point there.
4.0.0
The package and code now use the Overplay name everywhere. This release has breaking changes.
- New npm package:
overplay. Runnpm uninstall @commentwidget/coreandnpm install overplay. The old package gets no more releases. - New API names:
initOverplay()replacesinitCommentWidget(). The script-tag global isOverplay(Overplay.init()), notCommentWidget. The types areOverplayConfigandOverplayAPI. The old names are removed. - New built files:
dist/overplay.esm.js,dist/overplay.umd.jsanddist/overplay.iife.js. - New anchor attribute: use
data-overplay-anchorin place ofdata-comment-anchor. Pins saved with the old attribute in their selector no longer find their component until you update your markup. - New browser storage keys (
overplay:*). Widget settings, the saved name, launcher position and filters reset once. Local-only notes from the default store are not carried over; passnew LocalStorageAdapter('comment-widget:<projectId>:comments')to keep reading them. Hosted users sign in again once. - The widget host element has
data-overplayin place ofdata-comment-widget. - Webhooks: the headers are now
X-Overplay-Event,X-Overplay-Delivery,X-Overplay-TimestampandX-Overplay-Signature. The signature scheme is unchanged. Update receivers that read the oldX-CommentWidget-*headers. - Account exports use the format label
overplay-export. - The source repository moves to
github.com/artemsvit/Overplay. Old links redirect.
3.13.0
- New name and look: the product is now Overplay. A new design system inspired by dock.us: one blue accent (
#0068f9), near-black ink, cool gray surfaces, the Inter font (self-hosted), pill buttons, hairline borders and large rounded page panels. - Website: the landing hero is a blue panel with white type; the product preview sits in a gray dotted stage. Section headings are larger. Eyebrow labels use sentence case.
- Dashboard: quieter sidebar with a gray active row, ink tabs, and accent text that stays readable in dark mode.
- Widget: pill buttons, the new blue as the default
primaryColor, and a near-black floating button. The Blue pin color is now the brand blue. - Emails, the sign-in window, dialogs, the link preview image, the touch icon and the email logo use the new brand.
- The logo is the comment pin with a ring inside. Icon buttons are circles. Tabs and segmented controls are pills; the widget's Open / Resolved / All tabs fill the panel width.
- Cloud: the old address
comments.artsvit.comonly redirects tohttps://overplay.app(301, or 308 for requests that send data). Sign in again on overplay.app, and reconnect MCP clients athttps://overplay.app/mcp. Account emails come fromaccounts@mail.overplay.app. The widget callshttps://overplay.appwhenserverUrlis the old address. - The landing hero keeps its dot grid and soft glow, without a frame. Dashboard rows show no gray hover; the sidebar uses Title Case and Upgrade Plan is a button.
- Teams: the account owner creates teams, adds people by username, makes some of them team admins and gives each team chosen projects. Team members get access to those projects; team admins manage them. Each person uses one seat per project.
- MCP Server page: setup first, then Project Access, then Connections and Recent Activity tabs. Recent Activity is a log of who used MCP, with which agent, in which project, and the result. Owners and admins see everyone's agent actions in their projects.
- Cloud: MCP is part of Pro and Max. Free accounts see an upgrade banner; their connections are kept and work again after an upgrade. Community keeps MCP for everyone.
- Cloud: Free now allows 2 members per project. Plan cards list MCP, and the Yearly switch shows 2 Months Free with the price per month.
- Widget: the comment menu holds only Delete Comment. Where a comment opens stays a Settings choice.
3.12.0
- Search and filters in the widget panel. Search finds words in a note, its replies, the people who wrote them and the name of its element, and ignores case and accents. Matches are marked, and a row shows the reply or element that matched. Filter by Open, Resolved or All, by Mine, or by an author from the list. This Page and All Pages count what each view shows. Clear Filters brings the list back when no notes match. Escape clears the search, and / moves to it from anywhere in the panel. Pins on the page follow the filters. The filters stay while the browser tab is open.
- Website: a public Changelog page at
/changelog, built from this file. Every page footer links to it. - Website: on phones, a menu button in the header opens How it works, Pricing, Docs and Sign in (or Dashboard). Press Esc to close it.
- Dashboard: new accounts see a Get started checklist on the Projects page: create a project, install the widget, leave a first comment, add a member and connect an AI agent. Done steps are checked from your account data. Hide Checklist hides it in this browser.
- Cloud: Plan & billing shows meters for comments this UTC month, projects, and members in your largest project. The sidebar shows a compact version. At 80% and 100% of the monthly comment limit, the dashboard shows a banner and the account owner gets one email per threshold each month.
- Cloud: optional yearly billing for Pro ($150/year) and Max ($300/year), tax included. A Monthly/Yearly switch appears on /pricing and Plan & billing once the yearly Paddle prices are configured (
PADDLE_PRICE_ID_YEARLY,PADDLE_MAX_PRICE_ID_YEARLY). - Cloud: Plan & billing has a billing history with the date, plan, amount and status of each payment, and a Download Invoice button for the Paddle invoice PDF.
- Workspace: a new Team page. The account owner adds admins by username. An admin manages every project of the owner (settings, websites, members, join requests, and moving or deleting any comment) but cannot delete projects, change billing, or add and remove admins. Admins use a member seat in each project; Free has no room for admins. Admins leave a team on the same page. MCP owner tools follow the same rules.
- Workspace: a new Activity tab in each project, for the owner and admins. It lists member, request, website, settings, team and agent connection changes, comments deleted by someone other than their author, and agent comment actions, newest first. Events are kept for one year.
CommentUser.roleacceptsadmin. The widget lets an admin move and delete every comment, like the owner. Older widget versions treat an admin as a member.- Workspace: a new Account page. Turn on two-factor authentication with an authenticator app (TOTP) and 10 one-time recovery codes; sign-in then asks for a code after the password. Download your data as one JSON file. Delete your account and everything you own in one step (blocked while a paid subscription is active).
- New Security page (
/security) and/.well-known/security.txt, linked from every footer. The Privacy Notice covers export, deletion and two-factor data. - Self-hosting: optional
TWO_FACTOR_KEYencrypts two-factor secrets;community/disable-two-factor.tsturns two-factor off for a locked-out user. - Project integrations in Settings → Integrations: Slack messages, signed webhooks (HMAC-SHA256), and issues in GitHub, Linear or Jira, created by hand with Create Issue or for every new comment. Tokens stay on the server and are encrypted when
INTEGRATIONS_KEYis set. Each integration shows its last delivery and has Send Test. Migration0014_notifications.sqlis required. See [Integrations](docs/INTEGRATIONS.md). - Cloud: comment email per member and project in the new Notifications tab: instant, a daily digest from the daily cron, or off (the default).
3.11.0
- Workspace: the Members list shows each member's email under their name, in place of "Can comment" and "You". Only the project owner sees this list. MCP
list_membersstill leaves emails out. - The project owner can move and delete every comment in the project, in the widget and through the service. Members still move and delete only their own comments. Only the author can change a comment's text, and MCP agents keep the author-only rule.
CommentUserhas an optionalrole("owner"or"member"); the hosted service sets it.
3.10.1
- Workspace: the MCP server page has a new design. One card shows the server switch, its address and three steps to connect an agent. Each connection shows its status, projects and permissions at a glance, with Edit Access and a New Token button. Project access and recent activity use the same rows as the rest of the workspace. The sidebar shows the MCP logo.
- A note on an item in a closed menu now shows Element hidden, not Element removed. Many menus (Radix, Headless UI, MUI, Vue) take closed items out of the page. A note that saved how its menu opens counts as hidden while the menu's button is on the page. It shows Element removed only when that button is gone too, or opening the menu does not bring the item back.
- MCP
list_commentsandsearch_commentsacceptincludeRepliessent as text ("true"), as agents with an older tool list do. - MCP
remove_membersays "Member not found." for a user who is not in the project. Before, it reported success.
3.10.0
- MCP
list_commentsandsearch_commentsreturn each comment's reply count and last reply time. SetincludeRepliesto get replies in the same call. OmitprojectIdto read every included project at once. - MCP
get_projectandlist_projectsshow whether a project allows only its listed websites. - Saved element selectors no longer start from IDs that frameworks make at run time, such as Radix (
radix-_r_3p_) or ReactuseId. These IDs change on each page load. - The MCP connect window is compact and shows only the request. Authorize and Cancel stay visible at the bottom of the window. Connection forms in MCP settings keep their save button in view too.
3.9.0
- Connect coding agents through the new MCP server, with OAuth sign-in or a manual token. Select projects and permissions for each connection, pause or revoke access, and switch all account MCP access off.
- Agents can read and search comments and replies, retrieve saved element context and activity, post replies, create or edit their own pins, resolve threads, and perform separately permitted project administration.
- MCP comments and replies show the agent name. Comment links can open the exact thread, and revision checks protect against stale agent edits.
- Add an MCP section to the landing page. Cloudflare and Community use the same MCP tools and access controls.
3.8.1
- Dropping the floating Comments button after a drag no longer opens the sidebar. Only a click opens it. (3.8.0 broke this.)
3.8.0
- Pick the color of the floating Comments button in Settings → Comments button: the default dark button, the site color, or one of 8 colors. A live sample shows the button, also while the sidebar hides it. Each person's choice is saved per project in this browser, like the pin color. Reset to Defaults brings back the dark button.
- Notes in menus open the menu again. Leave a note on an item in a dropdown, hamburger menu, drawer, submenu, tab, popover or dialog. The note saves how the menu was opened, and opening the note later (from the sidebar or Show Element) repeats it and shows the item. It works with native HTML, CSS-only menus (
:hover,:focus-within, the checkbox hack,:target), Bootstrap, Radix/shadcn, Headless UI, MUI, Vue and hand-written menus. Links to other pages and form submits are never repeated. - The opened menu stays open while you read and reply. Presses and focus in the widget no longer count as a click outside the page's menu, and the widget moves into an open modal dialog or popover while its note is open.
- You can add a note in an open menu with the Add Comment button; the menu no longer closes first.
- An element in a closed
<details>, in a collapsed accordion (max-height: 0), at opacity 0 or in a drawer moved off the screen now shows Element hidden. Before, these counted as shown. - If the menu cannot open, the note says which button to press, for example Open “Menu” to see it (a phone menu seen at desktop width).
- Menus that hide the page from screen readers (
aria-hiddenon other elements) no longer hide the widget.
3.7.0
- A comment now says what happened to its element. Element hidden names the element and the menu, tab or section that holds it, such as Checkbox “Peanuts” in Filters, with Show Element. Element removed says nothing on the page matches it now. Both show a dashed pin where the note was left; drag the pin to attach the note again. The list carries the same flag.
- Each note saves a readable name for its element, so people who did not write the note still know which element it is.
- A dragged pin hides its comment card and outlines the component under it, the same as placing a new note.
- The update notice has a clearer design: the new version, your version and the install command with Copy. × hides it until the next version.
- A click that a script makes on the page, such as Show Element opening a menu, no longer closes the open comment card.
3.6.0
- Dark theme. The panel, comment cards, menus, notices and the launcher have a dark version. Choose Light, Dark or System in Settings → Appearance. System follows the device.
- New
themeoption ('light','dark'or'system', default'light') sets the site's default. NewsetTheme()changes it later, for example when your site switches to dark mode. A theme a person picks in Settings still wins. - A comment whose element is hidden opens it: closed
<details>, popovers, menus and accordions (a button witharia-controlsandaria-expanded="false") and tabs. NewrevealComponent(comment, element)hook lets a site show it itself, for example zoom a map to a marker. SetautoReveal: falseto turn the automatic part off. - Each comment card in the list has the number at the right and the status under it, so cards line up and nothing moves when counts change.
- The pick outline is a plain stroke, without a label or fill.
- 3 more pin colors: Violet, Amber and Red.
- Buttons use Title Case, for example Add Comment and Post Comment.
- Comment fields hide their scrollbars.
- Page names in "All Comments" use the page's main heading when the document title is the same generic name on every route, and show the path next to the name.
3.5.0
- The panel header holds your account and Settings, next to close. Your picture (or initials) opens a menu with your name, Edit your name for guests, Settings and Sign out. The bottom bar is gone; it shows only when a new version is available.
- Settings are per project and per person, saved in this browser. Choose the pin color, green or gray resolved pins, regular or small pins, numbers or author initials on pins, where comments open (next to the pin or in the sidebar), whether the panel pushes the page aside, activity notices and the keyboard shortcut. Reset to defaults goes back to the site's configuration.
- Site options such as
pushContent,showNotificationsandenableKeyboardShortcutsare now the defaults that each person can change. - Avatars use the first letters of the first and last name, for example "AS".
3.4.1
- The comment card matches the website demo. The header shows the note number and "Open conversation" or "Resolved conversation", with close and a ⋯ menu. The menu holds Open in the sidebar and Delete comment.
- The open card ends with one reply line and Resolve. Once you type, the button becomes Send reply. Enter sends, and Shift+Enter starts a new line. A resolved card shows Resolved and Reopen conversation.
- Pins stay on screen. A dragged pin cannot leave the screen or go under the sidebar. A pin at the top edge points up from below its spot, and a pin at a side edge slides in.
- The new comment field has space above it again.
3.4.0
- A comment opens in a card next to its pin, beside the component it is about. The card has the note number, its status, the messages, Resolve or Reopen, and a reply field. A new comment opens in the same card.
- Prefer the sidebar? The dock button in the card's header opens the comment in the sidebar instead. The widget remembers the choice in this browser. The same button in the sidebar brings the card back next to the pin.
- A click on the page closes the card, unless it holds text you have not sent. Escape still closes it.
- Picking works like a browser inspector: the outline is solid, and a label names the element, for example
td · Line circuit breaker. - A
data-comment-anchorregion that covers more than a quarter of the screen, such as a whole dashboard or app frame, no longer takes every click. The row, cell or control inside it gets the note. Smaller anchors, such as a card, still win. - Paths for elements inside a unique
data-comment-anchorstart at that anchor, so they survive layout changes outside it. - On phones the card is a bottom sheet.
3.3.0
- A click now attaches the note to the element under the pointer: the button, link, field, heading, paragraph, image or icon. Before, any parent with an
id(such as#root,#__nextor#main) took the click, so many notes attached to the whole page frame. - Text inside a paragraph or heading attaches to that paragraph or heading. Icon parts attach to the whole icon. Explicit
data-comment-anchorkeys still win. - While you place a note, a dashed outline shows the element the note will attach to.
- A click on empty page space no longer fails with "Choose a visible page element". The note attaches to the page.
- Comment cards in the sidebar are more compact. The note number and status sit on the right of the author line. Text shows two lines.
- Hover or focus a comment in the sidebar to find it on the page: its pin pulses and its element gets a dashed outline.
- All comments groups other pages by their page title. A comment saves
pageTitle(the page'sdocument.title). Older comments without a title still show the path. - Removed the "Feedback that stays in context." subtitle. Error messages have space above them again.
- Hosted service: new migration
0007_comment_page_title.sqlstores the page title.
3.2.0
- Drag a pin to move it. The Move pin button and its placement step are gone. A short click still opens the comment.
canMovestill decides who can drag. - The open comment has a clearer header: a "Comments" back link and close on one bar, then the note number with an Open or Resolved status chip.
- While a comment is open, the other pins on the page fade to 30%. Hover a pin to see it at full strength.
- Resolve has a green check and no longer wraps. Delete asks for confirmation with Keep and a red Delete button.
- The sidebar shows New update available next to your name when npm has a newer version. A browser cannot update a site's code, so a click copies
npm install @commentwidget/core@latest. By default only development hosts (localhost,*.local,*.test) check, at most every 12 hours. SetupdateNotice: trueorfalseto change this.
3.1.0
- Comments open in a full-height sidebar instead of a small pop-up. Threads, replies and new comments use the whole sidebar, and the floating button hides while it is open, so nothing covers the comment field.
- The open sidebar pushes the page aside instead of covering it, so you can still comment on every part of the page. Set
pushContent: falseto keep it above the page. On phones it fills the screen. - Drag the floating comment button anywhere on the screen. The widget remembers the place in this browser. A short press still opens the sidebar.
- The sidebar has two views: Page comments (this page) and All comments (every page of the site, grouped by page). Select a comment from another page to go to that page. The sidebar opens there with the comment, and its pin and component are highlighted.
- A clearer refresh icon, shown as an outlined button next to Add a comment.
- Hosted service:
GET /api/commentswithoutpageUrlreturns the comments of every page in the project. The widget uses it for All comments. Deploy the service together with the widget. hideSidebar: truenow shows the sidebar only for an open thread or a new comment, with no list.
3.0.0
This is a major version because two defaults change for existing sites: the toggle shortcut, and the page ID for URLs with in-page anchors. To keep 2.x behavior, set keyboardShortcut: 'c' and a getPageId function that keeps the hash. Update install commands from @^2 to @^3.
- The overlay no longer flashes when comments refresh. The panel and thread keep their place, and only the refresh icon spins. A background check that finds no change does not redraw anything.
- When someone else adds a comment or reply, a short notification appears near the comment button. It has no actions and hides after 7 seconds. Set
showNotifications: falseto turn it off. - The default toggle shortcut is now Alt+Shift+C (Option+Shift+C on Mac) instead of the single key C, so it is not triggered by accident (WCAG 2.1.4).
keyboardShortcutaccepts modifier combinations such asctrl+shift+k. SetkeyboardShortcut: 'c'to keep the old behavior. - The default page ID no longer includes in-page anchors such as
#pricing, so pins stay visible after anchor links. Hash routes such as#/settingsremain separate pages. Local notes saved with an anchor still show. Hosted notes saved with an anchor are stored under the old page ID; setgetPageIdto keep the previous behavior. - Searching comments and background updates no longer rebuild text fields while you type, so IME input, undo history and screen reader focus are kept. Errors are announced once.
- The widget no longer fails to start on plain-HTTP pages outside localhost. It no longer needs
crypto.randomUUID, which browsers offer only on HTTPS. - Placement instructions now explain the keyboard method: Tab to an element and press Enter.
- Hosted sign-in survives network errors and HTML error pages from proxies. A 403 from an author-only action no longer signs the user out.
- Community server: set
TRUSTED_PROXY=1behind a reverse proxy so rate limits apply per client (compose.yamlsets it). Request bodies are read before the request is queued, so a slow upload no longer blocks other requests.
2.0.0
- Replaced the React overlay with a framework-independent widget and isolated Shadow DOM styles. No runtime dependencies or separate CSS import are required.
- Added hosted account sign-in and shared comments through
serverUrland a dashboard project ID. Custom REST and storage adapters remain available. - Attached pins to stable page components with relative positions. Pins follow responsive layouts, resizing, remounts and scrolling. Authors can move an existing pin without replacing the comment.
- Increased text sizes and reduced the floating launcher to an icon and comment counter.
- Added stable guest identities, author permissions, idempotent mutation retries and cross-tab local storage synchronization.
- Kept drafts after save failures and added cleanup, route handling, safe navigation and SSR-safe imports.
Migration from 1.x
- Initialize with
initCommentWidget(config)after the page mounts, and calldestroy()when it unmounts. - The widget no longer requires React/ReactDOM. Remove the old separate widget CSS import.
- Use the hosted service,
APIAdapter, or a working custom adapter instead of the former Firebase/Supabase placeholder adapters. usePortalis deprecated. The overlay always uses an isolated portal;containerrestricts pin placement.- Existing local storage keys can be retained by explicitly constructing
LocalStorageAdapterwith the old key.