WingoUI
Buttons & Actions
ButtonButton GroupCopy ButtonDelete ButtonTheme ToggleToggleToggle Group
Inputs
Avatar UploadCalendarCheckboxColor PickerComboboxCron PickerCurrency InputDate PickerDate Range PickerDate Time PickerDuration PickerEmail InputFile UploadFilter BuilderInputInput GroupListboxMasked InputMention InputMonth PickerMulti SelectNumber InputOTP InputPassword InputPhone InputRadio GroupRatingSearch InputSegmented ControlSelectSignature PadSliderSwitchTag InputTextareaTime Picker
Forms
Address InputCSV ImportFieldForm WizardInline EditInvoice line itemsRich Text EditorSchema Builder
Navigation
Back To TopBounce SidebarBreadcrumbCommand MenuGlobal SearchGooey NavHook SidebarNav MenuNav TabsPaginationProximity SidebarScroll ProgressSidebarStepsTable Of ContentsTabsTopbarUser MenuWorkspace Switcher
Overlays
Alert DialogContext MenuDialogDrawerDropdown MenuFamily DrawerHover CardPopoverSheetShortcuts DialogTooltipTour
Feedback
AlertBannerCookie ConsentEmoji ReactionEmpty StateNotification BellNotification CenterProgressRoute ProgressSkeletonSpinnerToast
Data Display
Approval FlowAvatarBadgeCalendar ViewCode BlockComment ThreadContact cardCountdownDescription ListDiff ViewerFile ListFile managerFolderGanttJSON ViewerKbdLog ViewerMarkdownPresenceSchedulerTagTimelineTree View
Tables & Lists
Audit LogData TableDeal PipelineEditable GridKanbanListMembers tablePermissions MatrixTableTask ListVirtual List
Charts & Stats
Animated CounterArea chartBar chartDonut chartFunnel chartGaugeGitHub ActivityHeatmap calendarLeaderboardLine chartRadial barSparklineStat CardTrackerTrend badge
Layout
AccordionApp ShellCardCollapsibleDetail LayoutEntity HeaderPage HeaderScroll AreaSeparatorSettings LayoutSplit ViewToolbar
Media
Audio PlayerCarouselCSV ViewerDOCX EditorDOCX ViewerExcel ViewerFile SystemImage CropperImage LightboxLocation MapPDF ViewerPowerPoint ViewerQR CodeStep PlayerVideo Player
AI Kit
Agent Status CardChat MessageChat ThreadConversation ListFluid OrbGrid RevealMatrix OrbModel PickerPrompt InputReasoning IndicatorRule BuilderSuggestion ChipsTool Call TimelineUsage MeterVoice InputWorkflow Canvas
Text & Effects
Gravity Letters
Mobile
Action SheetBottom Tab BarFABHaptic ButtonHero HeaderInstall PromptLarge Title HeaderNotification BannerOnboarding CarouselPicker WheelPull To RefreshSlide To ConfirmSticky CTA BarSwipe DeckSwipeable Tabs
Commerce
Cart drawerCategory pickerCheckout stepsCoupon inputFavorite buttonFilter panelListing cardListing gridOrder trackerPricePrice rangePricing tableProduct galleryQuantity stepperReviewsSeller card
Blocks
Admin Dashboard PageAdmin ShellAI Chat PageAutomation Builder PageCheckout PageCRM Contact PageCRM Pipeline PageError PagesInbox PageInvoice PageKPI DashboardListing Detail PageLogin PageMarketplace Home PageMarketplace Search PageMarketplace ShellMobile App HomeOnboarding FlowPost Listing WizardPricing PageRegister PageSettings PageUsers Admin Page
Hooks & Utilities
AI ChatChart kitCommerceDate utilsFile exportFile typesFiltersForm validationHapticsInvoicingMotion presetsNavigationNumber formatRelative timeRomanian locationsSpreadsheetText matchTonesUIProvideruseClipboarduseConsentuseControllableStateuseCooldownuseDebounceuseKeyboardInsetuseLocaleuseLongPressuseMediaControlsuseMediaQueryuseOverflowItemsusePersistedStateuseScrollEdgesuseScrollStateuseSelectionuseShortcutuseStickToBottom
GalleryTheme

Media

DOCX Editor

MediaDOCX EditorNew
CSV ViewerDOCX Viewer
Live props
Content
src
fileName
author
State
defaultReadOnly
defaultSuggesting
dirty
Behavior
defaultZoom
defaultSidebarOpen
defaultDarkPages
webFonts
locale
Appearance
variant
radius
highlightColor
activeHighlightColor
selectionColor
Layout
showToolbar
showFormatBar
showThumbnails
showStatusBar
showComments
showChanges
showDarkPages
showFind
showImport
showDownload
showPrint
showReadOnlyToggle
height640px
Code
import { DocxEditor } from "@/components/ui/docx-editor"

<DocxEditor />
ProNew

v1.0.0·Added in 1.5.0

A Word (.docx) editor with real pages, styles, fonts, tables, images, find and replace, comments and tracked changes, saved back to .docx.

Click on a page to place the caret and type; drag, double-click (word) or triple-click (paragraph) to select, Shift+click to extend. Arrow keys move by the lines you see on the page; Tab inserts a tab and Escape moves focus to the toolbars. The formatting bar sets the paragraph style (each style previews in a card), the font (the document's own fonts first), the size (type it, or A- / A+, Shift+Ctrl / ⇧⌘ + < >), bold, italic, underline, strikethrough, superscript, subscript, text color, highlight, links (Ctrl / ⌘+K opens a bar: Enter applies, Escape cancels), alignment, lists, indent (Ctrl / ⌘ + [ ]), line and paragraph spacing, images (pick or drop one, then drag a corner to resize), tables (a 10 x 8 grid; inside a table a menu adds, deletes, merges and splits), page breaks (Ctrl / ⌘+Enter), borders and clear formatting. What does not fit folds into the ⋯ menu; on a phone the bar sits at the bottom, above the keyboard. Ctrl / ⌘+F finds (Enter / Shift+Enter step, 2 of 6), Shift+Ctrl / ⇧⌘+H replaces one or all. Select text and add a comment (Ctrl+Alt / ⌥⌘+M): cards sit beside the pages where they fit, in a panel otherwise, with replies, resolve and reopen; tracked changes have Accept and Reject. The mode menu switches Editing, Suggesting (your edits become tracked changes under author) and Viewing. Zoom with - and +, the zoom menu (fit width, fit page), Ctrl / ⌘ + scroll, pinch, or Ctrl / ⌘ + = / -. The sidebar lists live page thumbnails (Up / Down, Home / End). Save (Ctrl / ⌘+S, with onSave), download, print (Ctrl / ⌘+P) and open another .docx from the toolbar; opening one over unsaved edits asks first.

Add to a project

npx wingo-ui@latest add docx-editor

Pro item: the CLI needs a Pro account. See plans

Dependencies

@eigenpal/docx-editor-coreprosemirror-stateprosemirror-viewprosemirror-modelprosemirror-historyprosemirror-tablesjsziplucide-reactalert-dialogbuttoncolor-pickerdropdown-menukbdpopoverselecttooltipuse-controllable-stateuse-media-queryui-config

Files

  • components/ui/docx-editor.tsx

See also

DOCX ViewerRich Text EditorPDF ViewerFile Upload
PreviousCSV ViewerNext DOCX Viewer
Pageof –
1 column
Loading document
Y