');-webkit-mask-repeat:no-repeat;-webkit-mask-position:50% 0;-webkit-mask-size:.5em 1em;-webkit-clip-path:inset(0 0 calc(1em - .5em) 0)padding-box;clip-path:inset(0 0 calc(1em - .5em) 0)padding-box;background-color:currentColor!important;margin-left:.125rem;padding:0 .25em;opacity:.84}code,pre{font-family:fira code,monospace;color:#212121}pre{overflow:auto;margin:0}code{font-size:85%;background-color:#f8f8f8;border-radius:6px;padding:.2em .4em;margin:0}.highlight{position:relative}.highlight pre{background-color:#f8f8f8!important;border-radius:8px}.highlight code{display:table;width:100%;padding:16px;font-size:13px;line-height:1.6;text-size-adjust:100%;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%}.btn{display:inline-block;background-color:#055deb;color:#fff;font-size:16px;line-height:1.5;font-weight:700;text-align:center;text-decoration:none;padding:14px 24px;border-radius:28px;vertical-align:middle;border:2px solid transparent;will-change:background-color,color}.btn.btn-small{padding:10px 24px}@media screen and (max-width:640px){.btn{padding:14px 16px}}.btn.product-bg{background-color:var(--product-color)}.btn-bordered{background-color:transparent;border-color:#055deb;color:#055deb}.btn-white-bordered{background-color:transparent;border-color:#fff;color:#fff}.icon-button{position:relative;width:48px;height:48px;border-radius:50%}.icon-button .icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px;color:#055deb}.arrow-link{display:inline-flex;align-items:center;text-decoration:none;font-size:16px;font-weight:700;line-height:1.2;margin:0;padding:0}.arrow-link span{color:inherit;border-bottom:1px solid transparent}.arrow-link svg{width:20px;height:20px}.arrow-link.prev span{margin-left:4px;padding-top:2px;order:2}#cookie-notice{display:none;position:fixed;background-color:rgba(35,37,38,.97);left:0;right:0;bottom:-200px;box-shadow:0 -1px 14px rgba(0,0,0,6%),0 -1px 2px rgba(0,0,0,4%),0 -5px 15px rgba(0,0,0,4%);transform:translateZ(0);animation:slideUpCookieNotice .6s 1s ease-in forwards;z-index:100}#cookie-notice .cookie-content{position:relative;display:flex;align-items:center;justify-content:center;padding-top:12px;padding-bottom:12px}#cookie-notice .cookie-text{color:rgba(255,255,255,.7);font-size:14px}#cookie-notice .cookie-text a{text-decoration:none;color:rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.54)}@media screen and (max-width:576px){#cookie-notice .cookie-text{padding-right:146px}}#cookie-notice .agree-btn{margin:0 0 0 24px;padding:12px 24px}@media screen and (max-width:576px){#cookie-notice .agree-btn{position:absolute;display:flex;align-items:center;justify-content:center;top:0;right:0;bottom:0;padding:12px 16px;border-radius:0}}@keyframes slideUpCookieNotice{100%{bottom:0}}input,textarea{font-family:pragmatica,Helvetica,Arial,sans-serif;font-size:16px;padding:12px 16px;border-radius:3px;border:1px solid #c6c6c6;margin-bottom:28px}input::-moz-placeholder,textarea::-moz-placeholder{color:#8f95a3}input::-moz-placeholder,textarea::-moz-placeholder{color:#8f95a3}input~.error-message{visibility:hidden;color:#ff4a4a;font-size:13px;line-height:16px;margin-top:-24px;margin-bottom:8px}@media screen and (max-width:640px){input~.error-message{display:none}}input:not(:focus):not(:placeholder-shown):valid{border-color:#c6c6c6}textarea{overflow:auto;overflow-wrap:break-word;resize:none}select{display:none}.with-tooltip{--tooltip-bg-color:rgba(35, 37, 38, .87);--tooltip-font-size:14px;--tooltip-font-weight:700;--tooltip-text-color:white;--tooltip-strong-text-color:white;--tooltip-border-radius:3px;--tooltip-padding:12px;--tooltip-border-width:1px;--tooltip-border-color:transparent;--tooltip-box-shadow:none;position:relative}.with-tooltip.idea-style{--tooltip-bg-color:#f7f7f7;--tooltip-font-size:12px;--tooltip-font-weight:400;--tooltip-text-color:#666;--tooltip-strong-text-color:#212121;--tooltip-padding:8px 12px 10px;--tooltip-border-color:#bdbdbd;--tooltip-box-shadow:0 2px 6px 0 rgba(0, 0, 0, .19)}.with-tooltip.idea-style .tooltip-text strong{font-weight:400}.with-tooltip .tooltip-text{font-family:pragmatica,Helvetica,Arial,sans-serif;position:absolute;visibility:hidden;overflow:visible;opacity:0;bottom:109%;left:0;padding:var(--tooltip-padding);background-color:var(--tooltip-bg-color);font-size:var(--tooltip-font-size);font-weight:var(--tooltip-font-weight);color:var(--tooltip-text-color);border-radius:var(--tooltip-border-radius);border:var(--tooltip-border-width)solid var(--tooltip-border-color);box-shadow:var(--tooltip-box-shadow);width:auto;min-width:240px;z-index:1000}.with-tooltip .tooltip-text strong{color:var(--tooltip-strong-text-color)}.with-tooltip.arrow-tooltip .tooltip-text{left:50%;transform:translateX(-50%);bottom:116%}.with-tooltip.arrow-tooltip .tooltip-text:before{content:'';position:absolute;width:0;height:0;bottom:-8px;left:50%;transform:translateX(-50%);border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--tooltip-bg-color)}.with-tooltip.arrow-tooltip .tooltip-text:after{content:'';position:absolute;width:0;height:0;bottom:-9px;left:50%;transform:translateX(-50%);border-left:8px solid transparent;border-right:8px solid transparent;border-top:8px solid var(--tooltip-border-color);z-index:-1}form{display:flex;flex-direction:column;text-align:left}form label{display:block;font-size:14px;color:#212121;font-weight:700;margin-bottom:4px}form .form-actions{margin-top:32px}form .form-actions .submit-holder .btn{width:100%}.loading-screen{display:none}.loading-screen .loading-screen-container{display:flex;flex-direction:column;justify-content:center;align-items:center;position:fixed;top:0;right:0;bottom:0;left:0;background-color:rgba(255,255,255,.95);z-index:1001;text-align:center}.loading-screen .sending .text{margin-top:12px;margin-left:10px}.loading-screen .error{display:none;max-width:640px;margin:0 auto}.loading-screen .error .title{font-size:30px;font-weight:300;padding-top:32px;margin-bottom:16px}.loading-screen .error .btn-back .arrow-link{margin-top:40px;margin-left:-24px}.expandable-section .expandable-section-link .link-show-more [class*=text-]{border-bottom:2px solid transparent}.expandable-section .expandable-section-link .link-show-more .text-hide{display:none}.animated-arrow-icon.to-left{transform:scaleX(-1)}.animated-arrow-icon .arrow-container{transform:translateX(-4px)}.animated-arrow-icon .arrow-line{stroke-dasharray:13px;stroke-dashoffset:13px}body,html{height:100%;margin:0;padding:0;color:#212121;font-family:pragmatica,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}html{scroll-padding-top:64px}.wrapper{min-height:100%;display:flex;flex-direction:column;align-items:stretch}.main{flex-grow:1}.content-holder{position:relative;max-width:1260px;margin-right:auto;margin-left:auto;padding-right:40px;padding-left:40px}@media screen and (max-width:768px){.content-holder{padding-right:32px;padding-left:32px}}@media screen and (max-width:480px){.content-holder{padding-right:20px;padding-left:20px}}.section-content{padding-top:80px;padding-bottom:80px}@media screen and (max-width:768px){.section-content{padding-top:56px;padding-bottom:56px}}.page-content{padding-top:calc(var(--navbar-height) + 40px);padding-bottom:80px}@media screen and (max-width:768px){.page-content{padding-top:calc(var(--navbar-height) + 24px);padding-bottom:56px}}#navbar{position:absolute;width:100%;height:var(--navbar-height);z-index:1000;background-color:var(--navbar-color)}#navbar .content-holder{height:100%}#navbar .nav-container{display:flex;height:100%;align-items:center}.navigation{height:100%}@media screen and (max-width:876px){.navigation{display:none}}.navigation .nav-list{display:flex;height:100%;list-style:none}#navbar{--navbar-item-bg:rgba(255, 255, 255, .12);--navbar-item-underline:rgba(255, 255, 255, .75)}.nav-item{display:flex;align-items:center;padding:0 22px;border-radius:0 0 8px 8px;-webkit-transform:translateZ(0)}@media screen and (max-width:1200px){.nav-item{padding:0 14px}}@media screen and (max-width:1024px){.nav-item{padding:0 10px}}.nav-item:last-child.button{padding:0 0 0 10px}.nav-item:last-child.link{padding:0 0 0 22px}.nav-item.opens-subnav{border-radius:0}.nav-item .nav-link{text-decoration:none;font-size:15px;color:var(--navbar-link-color);font-weight:700;line-height:20px;opacity:.75}@media screen and (min-width:961px){.nav-item .nav-link{font-size:16px}}.nav-item .nav-link span{padding-bottom:1px;border-bottom:1px solid transparent}.nav-item .nav-link.with-caret-icon:after{content:'';display:inline-block;vertical-align:middle;margin:-3px 0 0 6px;border-bottom:2px solid #fff;border-right:2px solid #fff;width:6px;height:6px;transform:rotate(45deg);transform-origin:66% 66%}.nav-item .nav-link.with-caret-icon span{border-style:dotted}.nav-item .nav-link.external-link{display:flex}.nav-item .nav-link.external-link span{margin-bottom:-2px}.nav-item .nav-link.dotted-underline span{border-style:dotted}.nav-item .nav-button{padding:10px 20px;line-height:1.2}@media screen and (max-width:1024px){.nav-item .nav-button{padding:8px 12px}}@media screen and (max-width:991px){.nav-item .nav-button{font-size:14px;padding:8px}}@media screen and (min-width:1101px){.nav-item .short-name{display:none}}@media screen and (max-width:1100px){.nav-item .short-name+span{display:none}}.mobile-subnav .subsection-holder .subsection-title,.subnav-topbar .title-holder .title{color:rgba(0,0,0,.38);font-size:20px;font-weight:300}.subnav{visibility:hidden;opacity:0;background-color:#fff;will-change:opacity}@media screen and (max-width:876px){.subnav{width:100%;overflow-x:hidden}}.subnav .desktop-subnav,.subnav .mobile-subnav{display:none;height:100%}@media screen and (min-width:877px){.subnav .desktop-subnav{display:block}}.subnav .desktop-subnav .subsection{display:none}@media screen and (max-width:876px){.subnav .mobile-subnav{display:block}}.subnav .content-holder{overflow:auto}@media screen and (min-width:877px){.subnav .content-holder{padding-top:32px}}.subnav .navigation{display:block;padding-bottom:32px;height:auto}@media screen and (min-width:877px){.subnav .navigation{border-bottom:1px dotted rgba(0,0,0,.16);margin-bottom:32px}}.subnav .navigation .nav-list .nav-item{padding:0 32px 0 0}.subnav .navigation .nav-list .nav-item .nav-link{font-size:16px;font-weight:400;color:#212121;opacity:1}.subnav .navigation .nav-list .nav-item .nav-link.with-caret-icon:after{display:none}.mobile-subnav .subnav-body{display:flex;width:200%;height:calc(var(--app-window-height) - var(--navbar-height) - 72px);will-change:transform}.mobile-subnav .nav-holder,.mobile-subnav .subsection-holder{width:100%}.mobile-subnav .subsection-holder{will-change:transform}.mobile-subnav .subsection-holder .subsection{display:none}.mobile-subnav .subsection-holder .subsection-title{margin:16px 0 12px}.mobile-subnav .navigation{padding:0 0 12px}.mobile-subnav .navigation .nav-list{flex-direction:column}.mobile-subnav .navigation .nav-list .nav-item{padding:0;margin:0 -16px}.mobile-subnav .navigation .nav-list .nav-item .nav-link{width:100%;padding:20px 16px;border-radius:3px}.mobile-subnav .navigation .nav-list .nav-item .nav-button{color:#055deb;border:1px solid;margin:8px 16px;padding:12px 32px;min-width:220px}@media screen and (max-width:480px){.mobile-subnav .navigation .nav-list .nav-item .nav-button{width:100%}}.subnav-topbar{position:relative;padding:12px 0}@media screen and (min-width:877px){.subnav-topbar{display:none}}.subnav-topbar .subnav-underline{position:absolute;left:0;bottom:0;width:100%;height:1px;background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(0,0,0,.12) 50%,transparent 0,transparent);background-size:6px 1px}.subnav-topbar .topbar-holder{display:flex;align-items:center;justify-content:space-between}.subnav-topbar .title-holder{display:flex;align-items:center}.subnav-topbar .title-holder .arrow-link{display:none}.subnav-topbar .close-btn{margin-right:-6px}.subnav-topbar .close-btn .icon-button .icon{color:rgba(0,0,0,.26)}@media screen and (max-width:876px){.subnav-content{margin-top:16px}}@media screen and (min-width:877px){.subnav-content.services .category-products{flex-direction:row}.subnav-content.services .category-products .product-item:not(:first-child){margin-left:24px}}.subnav-content .section .heading{color:#055deb;font-size:24px;font-weight:300;padding-top:0;margin-bottom:24px}@media screen and (min-width:877px){.subnav-content .section .heading{display:none}}@media screen and (max-width:876px){.subnav-content .section .heading{color:#8f95a3;font-size:20px}}.subnav-content .section .heading+.category{margin-top:-16px}.subnav-content ul{list-style:none}.subnav-content .categories{display:flex;flex-direction:row;-moz-column-gap:32px;column-gap:32px}@media screen and (max-width:876px){.subnav-content .categories{flex-direction:column}}.subnav-content .category{padding:0 40px 40px 0}@media screen and (max-width:876px){.subnav-content .category{padding-bottom:24px;padding-right:0}}.subnav-content .category .subheading{color:#8f95a3;font-size:14px;margin-bottom:10px}@media screen and (min-width:877px){.subnav-content .category .subheading{font-size:16px}}.subnav-content .category-products{display:flex;flex-direction:column}.product-item:not(:last-child){margin-bottom:6px}@media screen and (min-width:877px){.product-item{margin-left:-16px}}@media screen and (max-width:876px){.product-item{margin-right:0}}.product-item .product-link{display:flex;flex-direction:row;align-items:center;padding:16px;border-radius:8px;min-width:100px;text-decoration:none}@media screen and (min-width:877px){.product-item .product-link{max-width:400px}}@media screen and (max-width:876px){.product-item .product-link{padding:14px 16px;margin-left:-16px;margin-right:-16px}}.product-item .product-link.with-description{align-items:flex-start}.product-item .product-link .external-link{display:flex}.product-item .product-link svg{flex-shrink:0;margin-right:12px;width:44px;height:44px}@media screen and (max-width:876px){.product-item .product-link svg{margin:0 16px 0 0;width:32px;height:32px}}.product-item .product-link span{font-size:15px;color:#212121}@media screen and (max-width:876px){.product-item .product-link span{font-size:16px}}.product-item .product-link .description{font-size:14px;color:#6a707f;margin-top:4px}#navbar{--logo-underline:white;--product-main-logo:white;--menu-icon:white;--menu-icon-border:rgba(255, 255, 255, .54)}.logo .logo-nav-link .icon-menu{font-size:24px;color:var(--menu-icon)}.logo .logo-nav-link .icon-menu:before{display:flex;align-items:center;justify-content:center;height:40px;width:40px}.logo{height:100%;margin-right:auto}.logo .logo-nav-link{display:flex;align-items:center;text-decoration:none;height:100%;padding:0 20px;margin-left:-20px;will-change:width}@media screen and (max-width:876px){.logo .logo-nav-link{display:flex;align-items:center;height:100%}}.logo .logo-nav-link .main-logo{height:30px}@media screen and (max-width:876px){.logo .logo-nav-link .main-logo{height:24px}}@media screen and (min-width:877px){.logo .logo-nav-link .icon-menu{display:none}}.logo .logo-nav-link.product-logo{position:relative}.logo .logo-nav-link.product-logo .main-logo{position:absolute;top:0;width:100px;transform-origin:left;transform:scale(.45)translateY(0)translateZ(0);will-change:transform}.logo .logo-nav-link.product-logo .main-logo svg path{fill:var(--product-main-logo)}.logo .logo-nav-link.product-logo .icon-menu{border:1px solid var(--menu-icon-border);margin:-1px}.logo .logo-nav-link.product-logo .product-sign{flex-shrink:0;display:inline-block;width:40px;height:40px;vertical-align:middle}.logo .logo-nav-link.product-logo .product-sign svg path{fill:#fff}.logo .logo-nav-link.product-logo .product-name{text-decoration:none;font-size:30px;font-weight:300;color:var(--navbar-logo-text-color);line-height:1;margin:3px 0 0 8px;vertical-align:middle;border-bottom:1px dotted transparent}@media screen and (max-width:1080px){.logo .logo-nav-link.product-logo .product-name{font-size:26px;margin-top:1px}}@media screen and (max-width:960px){.logo .logo-nav-link.product-logo .product-name{font-size:20px}}@media screen and (max-width:876px){.logo .logo-nav-link.product-logo .icon-menu,.logo .logo-nav-link.product-logo .main-logo{display:none}}@media screen and (max-width:480px){.logo .logo-nav-link.product-logo{width:126px}.logo .logo-nav-link.product-logo .icon-menu{display:block;border-color:transparent}.logo .logo-nav-link.product-logo .product-sign{margin-left:6px}.logo .logo-nav-link.product-logo .product-name{display:none}}#navbar{--lang-select-arrow-color:rgba(255, 255, 255, .64);--lang-select-bg-color:rgba(255, 255, 255, .12)}.language-select-holder{position:relative;margin:0 -10px 0 20px}@media screen and (max-width:1024px){.language-select-holder{margin-left:8px}}@media screen and (max-width:768px){.language-select-holder{margin-left:auto}}@media screen and (min-width:877px){.mobile-arrow-nav-item{display:none}}.mobile-arrow-nav-item .nav-link{display:flex;align-items:center;flex-direction:row;justify-content:space-between;padding:22px 0;color:#212121;border-top:1px dotted rgba(0,0,0,.16)}.mobile-arrow-nav-item .icon{font-size:24px;color:rgba(0,0,0,.26);margin-right:6px}:root{--snackbar-bottom-position:20px}.common-tab-content{display:none;opacity:0}.modal{display:none;position:fixed;top:0;right:0;bottom:0;left:0;overflow:auto;z-index:1003;animation:animateTop .2s}.modal .modal-content{display:flex;flex-direction:column;background-color:#fff;border-radius:10px;box-shadow:0 2px 16px rgba(0,0,0,.38);max-width:600px;max-height:calc(100vh - 2 * 40px);margin:40px auto;color:#212121}@media screen and (max-width:640px){.modal .modal-content{margin:40px 16px}}.modal .modal-header{flex-shrink:0;display:flex;justify-content:space-between;padding:16px 32px}.modal .modal-header .modal-title{color:#212121;font-size:24px;font-weight:300;line-height:1.2;padding-top:8px;margin-bottom:0}.modal .modal-body{display:flex;flex-direction:column;flex-grow:1;overflow:auto;padding:0 32px 16px}.modal .modal-footer{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;padding:16px 32px}@keyframes animateTop{0%{top:-300px;opacity:0}100%{top:0;opacity:1}}.code-editor{position:relative;display:block;font-family:fira code,monospace;font-size:13px;background-color:#fff;font-weight:400;border-radius:4px;padding:0 0 0 30px;margin-bottom:20px;box-shadow:0 1px 3px rgba(200,221,255,.6),0 4px 25px #c8ddff}@media screen and (max-width:640px){.code-editor{padding-left:15px}}@media screen and (max-width:576px){.code-editor{white-space:normal;word-wrap:break-word}}.code-editor .hide{display:none!important}.code-editor .scroll{overflow:auto;max-height:680px;padding-left:5px;margin-left:-5px}@media screen and (max-width:640px){.code-editor .scroll{padding-left:10px;margin-left:-10px}}.code-editor:before{position:absolute;content:'';top:0;left:0;background:#f0f0f0;border-right:1px solid #d0d0d0;width:30px;height:100%;border-radius:4px 0 0 4px;z-index:2}@media screen and (max-width:640px){.code-editor:before{width:15px}}.code-editor .comments{color:gray;font-weight:500;font-style:italic;white-space:nowrap}.code-editor .keyword{color:navy;font-weight:500}.code-editor .value{color:#00f;font-weight:500;background:0 0}.code-editor .variable{color:#660e7a;font-weight:500;font-style:italic}.code-editor .variable-thin{color:#660e7a}.code-editor .annotation{color:#807f17;font-weight:500}.code-editor .string{color:#397f00;font-weight:500;background-color:transparent}.code-editor.kotlin .constant{color:#4782e2}.ul-tree{position:relative;padding-left:0;margin:0}@media screen and (max-width:576px){.ul-tree{background-color:#fff}}.ul-tree ul{position:relative;margin:0;padding-left:0}.ul-tree ul:last-child{margin-bottom:0}.ul-tree .second-level,.ul-tree .third-level{padding-left:12px}.ul-tree .bordered-level{border-left:1px solid #e6e6e6}.ul-tree .comments li{line-height:20px}.ul-tree .active>.shortening{display:none}.ul-tree .active>.filling{background-color:transparent}.ul-tree .active>.left-brace,.ul-tree .active>.right-brace{margin:0}.ul-tree .filling{background-color:#ecfaeb}.ul-tree .no-shift{padding:0}.ul-tree .no-shift li{padding:0}.ul-tree .right-brace{margin-left:-8px;padding-right:1px}.ul-tree li{position:relative;list-style:none outside none;margin:0;padding-left:14px;line-height:20px;white-space:nowrap}@media screen and (max-width:640px){.ul-tree li{line-height:18px}}.ul-tree>li{padding-left:8px}@media screen and (max-width:640px){.ul-tree>li{line-height:18px}}.ul-tree .empty-line{line-height:19px}@media screen and (max-width:640px){.ul-tree .empty-line{line-height:18px}}.ul-tree.ul-tree-drop .drop{position:absolute;width:11px;height:11px;top:6px;left:-5px;background:url(/images/icons/code-collapse-controls.png)no-repeat;z-index:2}.ul-tree.ul-tree-drop .second-level .drop{top:5px;left:-25px}.ul-tree.ul-tree-drop .second-level .drop-bottom{left:-25px;bottom:6px}.ul-tree.ul-tree-drop .drop-bottom{position:absolute;display:inline-block;width:11px;height:11px;bottom:5px;left:-5px;background:url(/images/icons/code-collapse-controls.png)-22px 0 no-repeat;z-index:2}.ul-tree.ul-tree-drop .active>.drop{background-position:-11px 0}.chroma{background-color:#fff}.chroma .line{display:flex}.chroma .k{color:#00f}.chroma .kc{color:#00f}.chroma .kd{color:#00f}.chroma .nc{color:#2b91af}.chroma .s{color:#397f00;font-weight:500}.chroma .s2{color:#397f00;font-weight:500}#redirect-suggestion .modal-content{max-width:500px}#redirect-suggestion .modal-footer{gap:16px;justify-content:flex-end}@media screen and (max-width:480px){#redirect-suggestion .modal-footer{flex-direction:column;margin-bottom:16px}}#redirect-suggestion .modal-footer .btn{padding:8px 20px}#redirect-suggestion .modal-footer .btn-no{min-width:96px}.additional-field{height:0;font-size:0;line-height:0;padding:0;margin:0;border:none;overflow:hidden}.thank-you-section{display:none}.thank-you-section .thank-you-holder{max-width:460px;margin:0 auto;text-align:center}.thank-you-section .icon{font-size:64px;color:#055deb}.thank-you-section .title{font-size:30px;font-weight:700;padding-top:8px;margin-bottom:8px}:root{--hero-overlay-color:black}.jxbrowser .hero.product{background-image:url(/images/product-visuals/jxbrowser.webp)}@media screen and (max-width:768px){.jxbrowser .hero.product{background-image:url(/images/product-visuals/jxbrowser-mobile.webp)}}.hero.product{position:relative;background-position:50% 60%;background-repeat:no-repeat;background-size:cover}.hero.product:before{content:'';position:absolute;background:linear-gradient(to right,var(--hero-overlay-color) 20%,transparent 100%)no-repeat;background-size:cover;opacity:.8;width:100%;height:100%;top:0;left:0;right:0;bottom:0}@media screen and (max-width:768px){.hero.product:before{background:#000;opacity:.65}}.hero.product .page-content{color:#fff;padding-bottom:48px}.hero.product .page-content .title{font-size:30px;color:#fff;font-weight:700;margin-bottom:24px;line-height:1.3}@media screen and (max-width:960px){.hero.product .page-content .title br{content:""}.hero.product .page-content .title br:after{content:" "}}@media screen and (max-width:480px){.hero.product .page-content .title{font-size:24px}}.hero.product .page-content .mobile-product-name{font-size:40px;font-weight:300;color:#fff}@media screen and (min-width:481px){.hero.product .page-content .mobile-product-name{display:none}}.hero.product .page-content .requirements{text-shadow:0 1px 2px rgba(0,0,0,.6);margin-bottom:40px}@media screen and (max-width:480px){.hero.product .page-content .hero-btn{width:100%}}.hero.product .page-content .release-info{display:flex;flex-wrap:wrap;margin-top:40px;list-style:none;text-shadow:0 1px 2px rgba(0,0,0,.6);letter-spacing:.2px}@media screen and (max-width:640px){.hero.product .page-content .release-info{flex-direction:column}}.hero.product .page-content .release-info li{margin-right:24px;margin-top:8px}.hero.product .page-content a:not(.btn){color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5)}.why-product .row{display:grid;grid-template-columns:repeat(3,1fr);gap:32px 80px}@media screen and (max-width:768px){.why-product .row{grid-template-columns:1fr}}.why-product .row .why-item{position:relative}.why-product .row .why-item .icon{font-size:32px;color:#055deb}@media screen and (max-width:768px){.why-product .row .why-item .icon{position:absolute}}.why-product .row .why-item .info-block{padding-top:10px}@media screen and (max-width:768px){.why-product .row .why-item .info-block{padding-top:6px;padding-left:56px}}.why-product .row .why-item .title{font-size:18px;padding-top:0;margin-bottom:8px}@media screen and (min-width:1025px){.jxbrowser .features.bento-layout .feature-list .feature-card:first-child{grid-area:a}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(2){grid-area:b}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(3){grid-area:c}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(4){grid-area:d}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(5){grid-area:e}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(6){grid-area:f}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(7){grid-area:g}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(8){grid-area:h}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(9){grid-area:i}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(10){grid-area:j}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(11){grid-area:k}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(12){grid-area:l}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(13){grid-area:m}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(14){grid-area:n}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(15){grid-area:o}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(16){grid-area:p}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(17){grid-area:q}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(18){grid-area:r}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(19){grid-area:s}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(20){grid-area:t}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(21){grid-area:u}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(22){grid-area:v}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(23){grid-area:w}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(24){grid-area:x}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(25){grid-area:y}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(26){grid-area:z}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(27){grid-area:aa}.jxbrowser .features.bento-layout .feature-list .feature-card:nth-child(28){grid-area:bb}}@media screen and (min-width:1025px){.dotnetbrowser .features.bento-layout .feature-list .feature-card:first-child{grid-area:a}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(2){grid-area:b}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(3){grid-area:c}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(4){grid-area:d}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(5){grid-area:e}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(6){grid-area:f}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(7){grid-area:g}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(8){grid-area:h}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(9){grid-area:i}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(10){grid-area:j}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(11){grid-area:k}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(12){grid-area:l}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(13){grid-area:m}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(14){grid-area:n}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(15){grid-area:o}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(16){grid-area:p}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(17){grid-area:q}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(18){grid-area:r}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(19){grid-area:s}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(20){grid-area:t}.dotnetbrowser .features.bento-layout .feature-list .feature-card:nth-child(21){grid-area:u}}.features .feature-list .feature-backdrop{position:fixed;background-color:#000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transform:translate3d(0,0,0);top:0;right:0;bottom:0;left:0;opacity:0;z-index:1002}@media screen and (max-width:640px){.feature-card .content-container .modal-content{margin-top:16px}}.feature-card .modal-content{display:none}.feature-card .modal-content.middle-content{height:100%}.feature-card .modal-content .learn-more-btn{display:flex;float:right;margin-top:16px}@media screen and (max-width:640px){.feature-card .modal-content .learn-more-btn{margin-top:24px}}.feature-card .middle-content-holder{display:flex;flex-direction:column;height:100%}.feature-card .image-holder{display:flex;height:100%;align-items:center;padding:20px 0}@media screen and (max-width:576px){.feature-card .image-holder{height:auto}}.feature-card .feature-image{display:block;max-height:430px;margin:0 auto}.feature-card .feature-image.full-width{width:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:top;object-position:top}.feature-card .feature-image.with-border-radius{border-radius:8px}.feature-card .feature-image.with-shadow{box-shadow:0 5px 14px rgba(68,101,128,.4)}.getting-help .support-plans .body .btn{display:inline-flex;justify-content:center;width:100%}@media screen and (max-width:768px){.getting-help .support-plans .body .btn{font-size:14px;padding:12px 10px}}.integration-services textarea{height:200px}.integration-services .contact-us .label{margin-top:20px;font-size:15px;color:#6a707f;text-align:center}.integration-services .contact-us .email-and-phone{display:flex;justify-content:center;align-items:center;margin:6px auto 16px;padding-right:12px}@media screen and (max-width:480px){.integration-services .contact-us .email-and-phone{flex-direction:column;padding-right:0}}.integration-services .contact-us .email-and-phone .divider{display:block;margin:0 12px;color:#b5bac7}@media screen and (max-width:480px){.integration-services .contact-us .email-and-phone .divider{display:none}}.integration-services .contact-us .email-and-phone .phone-number{white-space:nowrap}@media screen and (max-width:480px){.integration-services .contact-us .email-and-phone .phone-number{margin-top:6px}}.pricing .price-options .option-actions .btn{width:100%}.support-pricing .action .btn{width:100%}.simple-integration .common-tab-content .content-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px}@media screen and (max-width:860px){.simple-integration .common-tab-content .content-row{display:block;max-width:620px;margin:0 auto}.simple-integration .common-tab-content .content-row .col{margin-bottom:32px}}.simple-integration .common-tab-content .guide-button{display:flex;flex-direction:column;align-items:center;margin:40px 0 24px}.simple-integration .demo{position:relative;padding-top:56px}@media screen and (min-width:1201px){.simple-integration .demo{margin:0 32px}}.simple-integration .demo .documentation-link,.simple-integration .demo .window-link{position:absolute;font-size:14px}.simple-integration .demo .documentation-link .arrow,.simple-integration .demo .window-link .arrow{position:absolute;z-index:3}.simple-integration .demo .window-link{left:0;top:16px;color:#212121;font-style:italic;padding-bottom:1px;border-bottom:1px dotted}.simple-integration .demo .window-link .arrow{width:38px;height:44px;top:25px;left:45px}@media screen and (max-width:400px){.simple-integration .demo .window-link .arrow{left:16px}}.simple-integration .demo .documentation-link{right:0;top:40px}@media screen and (max-width:400px){.simple-integration .demo .documentation-link{left:32px;top:44px}}.simple-integration .demo .documentation-link a{font-family:fira code,monospace;padding-bottom:1px;border-bottom:1px dotted}@media(min-width:861px) and (max-width:1024px){.simple-integration .demo .documentation-link a{font-size:12px}}@media screen and (max-width:576px){.simple-integration .demo .documentation-link a{font-size:11px}}@media screen and (max-width:400px){.simple-integration .demo .documentation-link a{overflow:hidden}.simple-integration .demo .documentation-link a span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}.simple-integration .demo .documentation-link .arrow{width:48px;height:130px;top:25px;right:64px}.simple-integration .demo .documentation-link .tooltip-text{width:100%}.simple-integration .demo .demo-image{position:relative;border-radius:4px;overflow:hidden;margin:16px auto 0;box-shadow:0 1px 3px rgba(200,221,255,.6),0 4px 25px #c8ddff}.simple-integration .demo .demo-image:before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-color:transparent;z-index:1}.simple-integration .demo .demo-image .app-content,.simple-integration .demo .demo-image .app-window{position:relative;display:block;width:100%;height:auto}.simple-integration .demo .demo-image .app-content{position:absolute;top:0;left:0}.simple-integration .demo .demo-image .app-content-area,.simple-integration .demo .demo-image .app-window-area{position:absolute;left:0;width:100%;background-color:transparent;z-index:4}.simple-integration .demo .demo-image .app-window-area{top:0;height:4%}.simple-integration .demo .demo-image .app-content-area{bottom:0;height:96%}.simple-integration #compose .demo-image .app-window-area{height:4.3%}.simple-integration #compose .demo-image .app-content-area{height:95.7%}@media screen and (min-width:861px){.simple-integration #javafx .demo-image{max-height:360px}}.modal.contact-modal .modal-body{padding-bottom:32px}.modal form .form-actions{margin-top:0}.modal .thank-you-section .section-content{padding-top:20px}.teaser-html-css-javascript{--max-value-right-offset:62px;--max-axis-height:374px}@media screen and (max-width:640px){.teaser-html-css-javascript{--max-axis-height:506px}}.teaser-html-css-javascript .chart .browser-scores .system .score-line .score,.teaser-html-css-javascript .max-score-value .value{font-family:fira code,monospace;font-size:12px;font-weight:600}.teaser-html-css-javascript .chart-container{overflow-x:auto;margin-top:16px}.teaser-html-css-javascript .chart{position:relative;display:grid;grid-template-columns:1fr;row-gap:12px;padding-top:10px}@media screen and (min-width:641px){.teaser-html-css-javascript .chart{grid-template-columns:max-content minmax(120px,555px)max-content;max-width:-moz-fit-content;max-width:fit-content;row-gap:16px}}.teaser-html-css-javascript .chart .browser-name{grid-column:1;font-size:14px;color:#8f95a3;align-self:center;justify-self:end;margin-right:16px}@media screen and (max-width:640px){.teaser-html-css-javascript .chart .browser-name{justify-self:start}}.teaser-html-css-javascript .chart .browser-name.product{display:flex;align-items:center;font-weight:700;color:#212121}.teaser-html-css-javascript .chart .browser-name.product img{display:block;margin-right:6px}@media screen and (min-width:641px){.teaser-html-css-javascript .chart .browser-scores{grid-column:2/span 1}}.teaser-html-css-javascript .chart .browser-scores .system.windows{background-color:rgba(218,215,255,.2)}.teaser-html-css-javascript .chart .browser-scores .system.windows .score-line{background-color:#dad7ff}.teaser-html-css-javascript .chart .browser-scores .system.macos{background-color:rgba(154,199,255,.2)}.teaser-html-css-javascript .chart .browser-scores .system.macos .score-line{background-color:#9ac7ff}.teaser-html-css-javascript .chart .browser-scores .system.linux{background-color:rgba(186,240,241,.2)}.teaser-html-css-javascript .chart .browser-scores .system.linux .score-line{background-color:#baf0f1}.teaser-html-css-javascript .chart .browser-scores .system .score-line{display:flex;align-items:center;justify-content:flex-end;height:16px;padding-right:6px}.teaser-html-css-javascript .chart .browser-scores .system .score-line .score{color:#212121;opacity:.7}.teaser-html-css-javascript .max-score-line{position:absolute;height:var(--max-axis-height);width:1px;right:var(--max-value-right-offset);border-right:1px dashed #b5bac7}@media screen and (max-width:640px){.teaser-html-css-javascript .max-score-line{top:30px;right:0}}.teaser-html-css-javascript .max-score-value{justify-self:end}@media screen and (min-width:641px){.teaser-html-css-javascript .max-score-value{grid-column:3;grid-row:7;margin-left:-12px}}.teaser-html-css-javascript .max-score-value p{font-size:14px;color:#8f95a3}.teaser-html-css-javascript .max-score-value .value{line-height:1}.teaser-html-css-javascript .chart-info{display:flex;justify-content:space-between;margin-right:16px}@media screen and (min-width:641px){.teaser-html-css-javascript .chart-info{grid-column:2}}@media screen and (min-width:641px){.teaser-html-css-javascript .footnote{grid-column:2}.teaser-html-css-javascript .footnote p{margin-top:-8px}}.teaser-html-css-javascript .footnote p{font-size:14px;color:#8f95a3}.teaser-html-css-javascript .legend{display:flex;flex-wrap:wrap}@media screen and (max-width:640px){.teaser-html-css-javascript .legend{flex-direction:column}}.teaser-html-css-javascript .legend .item{font-size:14px;margin-right:16px}.teaser-html-css-javascript .legend .item:before{content:'';display:inline-block;width:10px;height:10px;margin-right:8px;border-radius:2px}.teaser-html-css-javascript .legend .item.windows:before{background-color:#dad7ff}.teaser-html-css-javascript .legend .item.macos:before{background-color:#9ac7ff}.teaser-html-css-javascript .legend .item.linux:before{background-color:#baf0f1}.teaser-java-javascript{display:flex;margin-top:16px}@media screen and (max-width:860px){.teaser-java-javascript{flex-direction:column}}.teaser-java-javascript .code-column{width:60%}@media screen and (max-width:860px){.teaser-java-javascript .code-column{width:100%}}.teaser-java-javascript .code-column pre code{font-size:13px;line-height:1.5;padding:14px}.teaser-java-javascript .code-column p{font-size:14px;margin-bottom:8px;color:#6a707f}.teaser-java-javascript .code-column p:not(:first-child){margin-top:12px}.teaser-java-javascript .example-column{width:40%;margin-left:24px;margin-top:29px}@media screen and (max-width:860px){.teaser-java-javascript .example-column{width:100%;margin-left:0}}.teaser-java-javascript .example-column .java-javascript-image-holder{display:flex;height:100%;align-items:center;border-radius:8px;background-color:#f8f8f8;padding:8px}@media screen and (max-width:960px){.teaser-java-javascript .example-column .java-javascript-image-holder{align-items:flex-start}}@media screen and (max-width:860px){.teaser-java-javascript .example-column .java-javascript-image-holder{justify-content:center;padding:24px 24px 8px}.teaser-java-javascript .example-column .java-javascript-image-holder img{max-width:400px;width:100%}}.teaser-java-javascript .example-column .java-javascript-image-holder img{display:block;border-radius:8px}.teaser-latest-security-updates{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:20px 0}.teaser-latest-security-updates .bar-cell .bar-line .bar-score,.teaser-latest-security-updates .version-cell span{font-family:fira code,monospace;color:#212121;font-size:12px;font-weight:700;line-height:1}.teaser-latest-security-updates .chart-container{width:100%}.teaser-latest-security-updates .chart{position:relative;display:grid;grid-template-columns:min-content 1fr}.teaser-latest-security-updates .axis-names,.teaser-latest-security-updates .bar-column{display:grid;grid-template-rows:200px 36px 24px}.teaser-latest-security-updates .data{display:grid;grid-template-columns:repeat(10,1fr)}@media screen and (max-width:960px){.teaser-latest-security-updates .data{grid-template-columns:repeat(6,1fr)}}@media screen and (max-width:768px){.teaser-latest-security-updates .data{grid-template-columns:repeat(4,1fr)}}@media screen and (max-width:430px){.teaser-latest-security-updates .data{grid-template-columns:repeat(3,1fr)}}.teaser-latest-security-updates .y-axis{display:flex;align-items:center;justify-content:flex-end;border-right:1px solid #b5bac7;border-bottom:1px solid #b5bac7}.teaser-latest-security-updates .y-axis .y-label-container{position:relative;height:200px;width:24px}.teaser-latest-security-updates .y-axis .y-label-container .y-label{position:absolute;font-size:14px;color:#8f95a3;transform-origin:bottom left;transform:rotate(270deg);text-align:center;width:200px;line-height:24px;bottom:0;left:22px}.teaser-latest-security-updates .product-name{display:flex;align-items:center;padding-right:24px}@media screen and (max-width:640px){.teaser-latest-security-updates .product-name{padding-right:6px}.teaser-latest-security-updates .product-name span{display:none}}.teaser-latest-security-updates .product-name span{font-size:14px;color:#8f95a3;line-height:1;margin-left:8px}.teaser-latest-security-updates .product-name.chromium i{position:relative;font-size:22px;color:#6094ef}.teaser-latest-security-updates .bar-column:last-child .version-cell.product{border-right:inherit}@media screen and (max-width:960px){.teaser-latest-security-updates .bar-column:nth-child(-n+4){display:none}}@media screen and (max-width:768px){.teaser-latest-security-updates .bar-column:nth-child(-n+6){display:none}}@media screen and (max-width:430px){.teaser-latest-security-updates .bar-column:nth-child(-n+7){display:none}}.teaser-latest-security-updates .version-cell{display:flex;align-items:center;justify-content:flex-end;padding:0 8px;border-right:2px solid var(--product-color)}.teaser-latest-security-updates .version-cell span{text-align:right;margin-top:2px}.teaser-latest-security-updates .version-cell.product{background-color:var(--product-color);border-right:2px solid #fff}.teaser-latest-security-updates .version-cell.product span{color:#fff}.teaser-latest-security-updates .bar-cell{position:relative;display:flex;align-items:flex-end;justify-content:flex-end;width:100%;height:100%;border-bottom:1px solid #b5bac7}.teaser-latest-security-updates .bar-cell:after{content:'';position:absolute;width:2px;height:1px;right:0;bottom:-1px;background-color:#fff}.teaser-latest-security-updates .bar-cell .bar-container{min-height:16%;border-right:2px solid var(--product-color)}.teaser-latest-security-updates .bar-cell .bar-line{display:flex;justify-content:center;background-color:#9ac7ff;width:46px;height:100%;margin:0 2px}.teaser-latest-security-updates .bar-cell .bar-line .bar-score{margin-top:12px}.teaser-latest-security-updates .chart-legend{display:flex;margin-top:24px}@media screen and (max-width:400px){.teaser-latest-security-updates .chart-legend{flex-wrap:wrap}}.teaser-latest-security-updates .chart-legend .item{display:flex;font-size:14px;color:#212121}@media screen and (min-width:401px){.teaser-latest-security-updates .chart-legend .item:not(:first-child){margin-left:16px}}.teaser-latest-security-updates .chart-legend .item:before{content:'';display:inline-block;flex-shrink:0;width:12px;height:12px;margin:4px 8px 0 0;border-radius:2px}@media screen and (max-width:400px){.teaser-latest-security-updates .chart-legend .item.chromium{margin-bottom:6px}.teaser-latest-security-updates .chart-legend .item.chromium:before{margin-right:20px}}.teaser-latest-security-updates .chart-legend .item.chromium:before{background-color:#9ac7ff}.teaser-latest-security-updates .chart-legend .item.product:before{width:calc(2 * 12px);background-color:var(--product-color)}@media screen and (max-width:768px){[data-hash="#latest-security-updates"] .modal-content p br{content:""}[data-hash="#latest-security-updates"] .modal-content p br:after{content:" "}}#span-9aefcb2c.cloaked-e-mail:before{content:attr(data-domain)"\0040" attr(data-user);unicode-bidi:bidi-override;direction:rtl}
Products
Browser integration
Java native integration
Domain-Driven Design
Back to blog Rich text editors for Java December 20, 2024 Vladyslav Lubenskyi
All desktop toolkits provide controls for text editing, ranging from very basic
to more advanced options. But what about rich text editing? Are there controls
that allow users to format text and add pictures? Are there any WYSIWYG editors
you can use in a Java application?
In this article, we will explore how to solve this matter by using JxBrowser and
Quill.js to embed modern rich text editors into Java desktop applications.
Built-in WYSIWYG editors in Java Built-in editors in Swing and JavaFX have limited functionality and fall short
in providing advanced capabilities such as text formatting, styling, and
multimedia support. They also struggle with efficiency when handling large data
volumes or complex text structures. Meanwhile, SWT does not provide a rich text
editor at all.
Third-party WYSIWYG editors for Java In Swing In Swing, there are currently two available text editors: JRichTextEditor and
TinyMCE. JRichTextEditor has not been updated in nine years, with its last
commit on GitHub from that time, and its documentation is outdated. TinyMCE, on
the other hand, is a commercial paid editor and is cloud-based by default. For
developers seeking free alternatives, like Quill or similar solutions can be a
viable option, offering full control over your data without depending on
external servers.
In JavaFX JavaFX offers two rich text editor options: RichTextFX and RichTextArea, both
modern and actively maintained. They are capable kits that allow you to build
a rich text editor, but they require a fair deal of DIY effort to get
up and running.
In SWT SWT relies on UI widgets provided by the operating system, and it doesn’t have a
built-in rich text editor, as operating systems do not provide such widgets.
Nebula RichText offers an alternative but functions as a browser component
embedding CKEditor rather than a standalone editor.
While Nebula RichText is one approach, it uses a built-in browser component that
may not be suitable for professional use cases. A more flexible and powerful
option is to use JxBrowser, which allows you to embed a browser in your SWT
application, enabling smooth integration of any web-based WYSIWYG editor.
Read more about choosing the
browser for SWT and Eclipse applications .
Editors enabled by JxBrowser JxBrowser enables the integration of modern web-based editors, overcoming the
limitations of built-in editors. Choose JxBrowser when:
Built-in editors are not functional enough. You want to customize the looks and behavior of a WYSIWYG editor. You have a cross-platform application. You want to avoid dependencies on third-party clouds. JxBrowser’s ability to embed web applications ensures effective integration of
tools like Quill, providing powerful text editing capabilities, full
customization, and compatibility across Swing, JavaFX, and SWT. This combination
operates across all major operating systems, maintaining a consistent user
experience.
Java app with a WYSIWYG editor loaded in JxBrowser.
Adding JxBrowser to the project In this blog post, we will add JxBrowser to a Gradle project. If you’re using
another build system, you can use our Maven artifacts , add the
JAR files to the classpath, or even create
a standalone Eclipse plug-in .
To add JxBrowser to the project, apply the JxBrowser plug-in and add necessary
dependencies:
plugins {
id ( "com.teamdev.jxbrowser" ) version "1.2.1"
}
jxbrowser {
version = "8.2.1"
}
dependencies {
// Add the dependency to JxBrowser integration with Swing.
//
// Also, available: jxbrowser.swt, jxbrowser.javafx, jxbrowser.compose.
implementation ( jxbrowser . swing )
// Add the dependency to Chromium binaries for the current platform.
implementation ( jxbrowser . currentPlatform )
}
Adding rich text editor to Java application In the suggested approach, the actual text editor is a JavaScript widget on
the web page. Let’s create this page:
<!DOCTYPE html>
< html lang = "en" >
< head >
<!-- Make sure to use the latest verion of the library. -->
< script src = "https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js" ></ script >
< link href = "https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel = "stylesheet" />
</ head >
< body >
< div id = "editor" ></ div >
< script >
window . quill = new Quill ( '#editor' , {
theme : 'snow'
});
</ script >
</ body >
</ html >
After that, we can copy the page along with JavaScript and CSS assets to
the project’s resources.
Then, let’s create the browser and show the editor:
private void addTextEditor ( JPanel container ) {
var engine = Engine . newInstance ( OFF_SCREEN );
var browser = engine . newBrowser ();
var url = this . getClass (). getClassLoader (). getResource ( "editor.html" );
browser . navigation (). loadUrl ( url . toString ());
SwingUtilities . invokeLater (() -> {
var view = BrowserView . newInstance ( browser );
container . add ( view );
});
}
Accessing the formatted text To read the text from the Quill, execute a simple JavaScript code:
String getFormattedText ( Browser browser ) {
var frame = browser . mainFrame ();
if ( frame . isPresent ()) {
return frame . get (). executeJavaScript ( "quill.getSemanticHTML()" );
} else {
throw new IllegalStateException ( "Couldn't obtain the text" );
}
}
Adding content back to the page also requires a single JavaScript code:
void setText ( Browser browser , String text ) {
browser . mainFrame (). ifPresent ( frame -> {
frame . executeJavaScript ( "quill.setText(\"%s\")" . formatted ( text ));
});
}
Practical advice The example above demonstrates a very simple case of using JxBrowser as a host
for the rich text editor. For the applications in production, consider
these tips:
Reuse the Engine
instance to optimize performance. Starting and stopping
the engine involves launching and shutting down the main Chromium
process, which is resource-intensive. To avoid this overhead, we recommend
creating the engine once and reuse it throughout. Leverage profiles for isolation. In the multi-user environment
the data must stay isolated, and profiles are the tool to achieve it. Create
a new Profile
for each isolation context. class Application {
private static Engine engine ;
public static void main ( String [] args ) {
if ( engine == null ) {
// Create the browser engine only once.
engine = Engine . newInstance ( OFF_SCREEN );
}
// Create a separate profile for each user.
var bobProfile = engine . profiles (). newIncognitoProfile ( "Bob" );
var browserOne = bobProfile . newBrowser ();
var browserTwo = bobProfile . newBrowser ();
var aliceProfile = engine . profiles (). newIncognitoProfile ( "Alice" );
var browserThree = aliceProfile . newBrowser ();
var browserFour = aliceProfile . newBrowser ();
...
}
}
Conclusion In this article, we demonstrated how to integrate modern HTML-rich text editors
into Java desktop applications using JxBrowser and Quill.js. This approach
overcomes the limitations of built-in editors in Swing, JavaFX, and SWT,
providing advanced functionality and full control over text editing.
Sending…
Sorry, the sending was interrupted
Please try again. If the issue persists, contact us at
info@teamdev.com .
Your personal JxBrowser trial key and quick start guide will arrive in your Email Inbox in a few minutes.
teamdev.com
uses cookies to help operate the site and gather analytics data. You can read more about it in our Privacy statement . I agree