ZK has a strong interoperability with JavaScript plugins, through jQuery, or through native JavaScript integration. This page demonstrate how a ZK component can be easily integrated with 3rd party js library.
In this demo, the ZK components are decorated with the cleave.js to have a input mask.

Other form decoration plugins can be used with similar integration way.

<zk xmlns:w="client">
	<style src="/widgets/effects/form_effect/styles.css"/>

	<script src="/widgets/effects/form_effect/cleave.min.js" />
	<script src="/widgets/effects/form_effect/cleave-phone.us.js" />

	<div width="500px" class="form">
		<vlayout spacing="7px">
			<hlayout spacing="20px" valign="middle">
				<label class="name" value="Phone :" />
				<textbox id="phone" width='150px' placeholder="999 999 9999"
				 w:onBind="new Cleave(this.$n(), {phone: true, phoneRegionCode:'US'});"/>
				<label value="Mask : US Phone number" />
			</hlayout>
			<hlayout spacing="20px" valign="middle">
				<label class="name" value="Birthday :" />
				<textbox id="date" width='150px' placeholder="01-01-2222"
				 w:onBind="new Cleave(this.$n(), { date: true, delimiter: '-', datePattern: ['d', 'm', 'Y'] });"/>
				<label value="Mask : dd-mm-YYYY " />
			</hlayout>
			<hlayout spacing="20px" valign="middle">
				<label class="name" value="Time:" />
				<textbox id="country" width='150px' placeholder="12:00:00"
				 w:onBind="new Cleave(this.$n(), { time: true, timePattern: ['h', 'm', 's'] });"/>
				<label value='Mask : hh:mm:ss' />
			</hlayout>
			<hlayout spacing="20px" valign="middle">
				<label class="name" value="Credit Card:" />
				<textbox id="cc" width='150px' placeholder="4444 5555 6666 7777"
				 w:onBind="new Cleave(this.$n(), {  creditCard: true, onCreditCardTypeChanged: function(type) { type = type.split('15')[0]; zk.$('$cardType').setValue(type)}});"/>
				<vlayout>
					<label value='Mask : credit card' />
					<hlayout>
						<label value='Card type: ' />
						<label id="cardType" value='unknown' />
					</hlayout>
				</vlayout>
			</hlayout>
		</vlayout>
	</div>
</zk>